Sass에서 동적으로 변수 생성 또는 참조

Sass에서 동적으로 변수 생성 또는 참조

---

내 변수에 문자열 보간을 사용하여 다른 변수를 참조하려고합니다.

// Set up variable and mixin
$foo-baz: 20px;

@mixin do-this($bar) {
    width: $foo-#{$bar};
}

// Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin
@include do-this('baz');

하지만 이렇게하면 다음과 같은 오류가 발생합니다.

정의되지 않은 변수 : "$ foo-".

Sass는 PHP 스타일 변수 변수를 지원합니까?

---

Sass는 변수를 동적으로 생성하거나 액세스하는 것을 허용하지 않습니다. 그러나 유사한 동작에 목록을 사용할 수 있습니다.

scss :

$list: 20px 30px 40px;    
@mixin get-from-list($index) {
  width: nth($list, $index);
}

$item-number: 2;
#smth {
  @include get-from-list($item-number);
}

CSS 생성 :

#smth {
  width: 30px; 
}

• http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#lists
• http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions

---

이것은 실제로 변수 대신 SASS 맵을 사용하여 수행 할 수 있습니다. 다음은 간단한 예입니다.

동적 참조 :

$colors: (
  blue: #007dc6,
  blue-hover: #3da1e0
);

@mixin colorSet($colorName) {
    color: map-get($colors, $colorName);
    &:hover {
        color: map-get($colors, $colorName#{-hover});
    }
}
a {
    @include colorSet(blue);
}

다음과 같이 출력됩니다.

a { color:#007dc6 }
a:hover { color:#3da1e0 }

---

동적 생성 :

@function addColorSet($colorName, $colorValue, $colorHoverValue: null) {
  $colorHoverValue: if($colorHoverValue == null, darken( $colorValue, 10% ), $colorHoverValue);

  $colors: map-merge($colors, (
    $colorName: $colorValue,
    $colorName#{-hover}: $colorHoverValue
  ));

  @return $colors;
}

@each $color in blue, red {
  @if not map-has-key($colors, $color) {
    $colors: addColorSet($color, $color);
  }
  a {
    &.#{$color} { @include colorSet($color); }
  }
}

다음과 같이 출력됩니다.

a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }

---

조건부 값을 사용해야 할 때마다 함수에 의지합니다. 여기에 간단한 예가 있습니다.

$foo: 2em;
$bar: 1.5em;

@function foo-or-bar($value) {
  @if $value == "foo" {
    @return $foo;
  }
  @else {
    @return $bar;
  }
}

@mixin do-this($thing) {
  width: foo-or-bar($thing);
}

---

Here's another option if you're working with rails, and possibly under other circumstances.

If you add .erb to the end of the file extension, Rails will process erb on the file before sending it to the SASS interpreter. This gives you a can chance to do what you want in Ruby.

For example: (File: foo.css.scss.erb)

// Set up variable and mixin
$foo-baz: 20px; // variable

<%
def do_this(bar)
  "width: $foo-#{bar};"
end
%>

#target {
  <%= do_this('baz') %>
}

Results in the following scss:

// Set up variable and mixin
$foo-baz: 20px; // variable

#target {
  width: $foo-baz;
}

Which, of coarse, results in the following css:

#target {
  width: 20px;
}

---

To make a dynamic variable is not possible in SASS as of now, since you will be adding/connecting another var that needs to be parsed once when you run the sass command.

As soon as the command runs, it will throw an error for Invalid CSS, since all your declared variables will follow hoisting.

Once run, you can't declare variables again on the fly

To know that I have understood this, kindly state if the following is correct:

you want to declare variables where the next part (word) is dynamic

something like

$list: 100 200 300;

@each $n in $list {
    $font-$n: normal $n 12px/1 Arial;
}

// should result in something like

$font-100: normal 100 12px/1 Arial;
$font-200: normal 200 12px/1 Arial;
$font-300: normal 300 12px/1 Arial;

// So that we can use it as follows when needed

.span {
    font: $font-200;
    p {
       font: $font-100
    }
}

If this is what you want, I am afraid as of now, this is not allowed

참고URL : https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass