문제

Sass가있는 배열을 사용할 수 있는지 궁금합니다.

.donkey
  h2
    background-color= !donkey

.giraffe
  h2
    background-color= !giraffe

.iguana
  h2
    background-color= !iguana
도움이 되었습니까?

해결책

아니요, 이것은 불가능합니다. 이를 수행하는 가장 좋은 방법은 Mixin을 정의하는 것입니다.

+animal-h2(!name, !color)
  .#{name} h2
    background-color= !color

그런 다음 세 가지가 아닌 스타일 당 한 줄을 가질 수 있습니다.

+animal-h2("donkey", !donkey)
+animal-h2("giraffe", !giraffe)
+animal-h2("iguana", !iguana)

다른 팁

전적으로.

$animals: "donkey", "giraffe", "iguana"
@foreach $animal in $animals
  .#{$animal}
    h2
      background-color: !#{$animal}

NEX3의 대답이 정확합니다. Rails 3.1에서 Sass와 함께 작동하려면 CSS.SCSS 파일에 다음을 가져야했습니다.

$donkey: #CC4499;

@mixin animal-h2($name, $color) {
  .#{$name} h2 {
    background-color: $color;
  }
}

@include animal-h2("donkey", $donkey);
@include animal-h2("horse", #000);

어떤 출력 :

.donkey h2 {
    background-color: #CC4499;
}

.horse h2 {
    background-color: black;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top