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

Program / 글쓴이

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

// 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;
}

답변

이것은 실제로 변수 대신 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);
}

답변

레일로 작업하는 경우 및 가능한 다른 상황에서 다른 옵션이 있습니다.

파일 확장자 끝에 .erb를 추가하면 Rails는 파일을 SASS 인터프리터로 보내기 전에 파일에서 erb를 처리합니다. 이것은 루비에서 원하는 것을 할 수있는 기회를 제공합니다.

예 : (파일 : 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') %>
}

다음 scss가 생성됩니다.

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

#target {
  width: $foo-baz;
}

대략적으로 다음과 같은 CSS가 생성됩니다.

#target {
  width: 20px;
}

답변

최근에 동적으로 색상을 참조해야 할 필요성을 발견했습니다.

모든 프로젝트에 대해 _colours.scss 파일이 있으며, 여기서 모든 색상을 한 번 정의하고 전체적으로 변수로 참조합니다.

내 _forms.scss 파일에서 사용 가능한 각 색상에 대한 버튼 스타일을 설정하고 싶었습니다. 일반적으로 지루한 작업입니다. 이것은 각각 다른 색상에 대해 동일한 코드를 작성하지 않아도되도록 도와주었습니다.

유일한 단점은 실제 CSS를 작성하기 전에 각 색상 이름과 값을 나열해야한다는 것입니다.

// $red, $blue - variables defined in _colours.scss
$colours:
  'red' $red,
  'blue' $blue;

@each $name, $colour in $colours {
  .button.has-#{$name}-background-color:hover {
    background-color: lighten($colour, 15%);
  }
}

답변

sass 명령을 실행할 때 한 번 구문 분석해야하는 다른 var를 추가 / 연결하므로 현재 SASS에서 동적 변수를 만들 수 없습니다.

명령이 실행 되 자마자 잘못된 CSS에 대한 오류가 발생합니다. 선언 된 모든 변수가 호이 스팅을 따르기 때문입니다.

실행 한 후에는 즉시 변수를 선언 할 수 없습니다.

내가 이것을 이해했음을 알기 위해 다음 내용이 올바른지 친절하게 설명하십시오.

다음 부분 (단어)이 동적 인 변수를 선언하려는 경우

뭔가

$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
    }
}

이게 당신이 원하는 거라면 지금은 두렵 습니다.

답변