선택자에 변수를 사용할 수 있습니까?

선택자에 변수를 사용할 수 있습니까?

---

이 변수가 있습니다.

$gutter: 10;

SCSS와 같은 선택기에서 사용하고 싶습니다.

.grid+$gutter {
    background: red;
}

따라서 출력은 CSS가됩니다.

.grid10 {
    background: red;
}

그러나 이것은 작동하지 않습니다. 가능합니까?

---

$gutter: 10;

.grid#{$gutter} {
    background: red;
}

예를 들어 URL에서 문자열에 사용되는 경우 :

background: url('/ui/all/fonts/#{$filename}.woff')

---

"보간"에 대한 Sass 참조에서 :

# {} 보간 구문을 사용하여 선택기와 속성 이름에 SassScript 변수를 사용할 수도 있습니다.

$gutter: 10;

.grid#{$gutter} {
    background: red;
}

또한 @each지시문은 보간 작업을 수행하는 데 필요하지 않으며 $gutter유일한 값을 포함하므로 루프가 필요하지 않습니다.

규칙을 생성 할 값이 여러 개인 경우 Sass 목록 및 다음을 사용할 수 있습니다 @each.

$grid: 10, 40, 120, 240;

@each $i in $grid {
  .g#{$i}{
    width: #{$i}px;
  }
}

... 다음 출력을 생성하려면 :

.g10  { width: 10px; }
.g40  { width: 40px; }
.g120 { width: 120px; }
.g240 { width: 240px; }

여기에 몇 가지 더 많은 예가 있습니다. .

---

여기에 해결책이 있습니다

$gutter: 10;

@each $i in $gutter {
  .g#{$i}{
     background: red;
  }
}

---

if it would be a vendor prefix, in my case the mixin did not compile. So I used this example

@mixin range-thumb()
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px; 
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

input[type=range]
  &::-webkit-slider-thumb
    @include range-thumb()
  &::-moz-range-thumb
    @include range-thumb()
  &::-ms-thumb
    @include range-thumb()

참고URL : https://stackoverflow.com/questions/12743837/can-i-use-variables-for-selectors