首頁猿問在Sass中動態(tài)創(chuàng)建或引用變量

在Sass中動態(tài)創(chuàng)建或引用變量

算法與數(shù)據(jù)結(jié)構(gòu) 源碼

郎朗坤 2019-06-18 15:23:24

在Sass中動態(tài)創(chuàng)建或引用變量我試圖在變量上使用字符串插值來引用另一個變量：// 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');但是，當(dāng)我這樣做時，我會得到以下錯誤：未定義變量：“$foo-”。Sass支持PHP風(fēng)格的變量嗎？

查看完整描述

3 回答

繁星coding

TA貢獻(xiàn)1797條經(jīng)驗獲得超4個贊

這實際上可以使用Sass映射而不是變量。下面是一個簡單的例子：

動態(tài)引用：

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

產(chǎn)出如下：

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

動態(tài)創(chuàng)建：

@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); }
  }
}

產(chǎn)出如下：

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

反對回復(fù) 2019-06-18

千萬里不及你

TA貢獻(xiàn)1784條經(jīng)驗獲得超9個贊

每當(dāng)我需要使用條件值時，我都依賴于函數(shù)。下面是一個簡單的例子。

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

反對回復(fù) 2019-06-18