首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在Sass中动态创建或引用变量

在Sass中动态创建或引用变量
EN

Stack Overflow用户
提问于 2011-12-16 19:18:12
回答 7查看 95.5K关注 0票数 105

我尝试在我的变量上使用字符串插值来引用另一个变量:

代码语言:javascript
复制
// 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风格的变量吗?

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2011-12-17 04:00:38

Sass不允许动态创建或访问变量。但是,您可以将列表用于类似的行为。

scss:

代码语言:javascript
复制
$list: 20px 30px 40px;    
@mixin get-from-list($index) {
  width: nth($list, $index);
}

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

生成的css:

代码语言:javascript
复制
#smth {
  width: 30px; 
}

票数 60
EN

Stack Overflow用户

发布于 2015-06-24 00:37:12

这实际上可以使用SASS映射而不是变量来实现。下面是一个快速示例:

动态引用:

代码语言:javascript
复制
$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);
}

输出为:

代码语言:javascript
复制
a { color:#007dc6 }
a:hover { color:#3da1e0 }

动态创建:

代码语言:javascript
复制
@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); }
  }
}

输出为:

代码语言:javascript
复制
a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }
票数 102
EN

Stack Overflow用户

发布于 2011-12-16 23:36:08

每当我需要使用条件值时,我都依赖于函数。这里有一个简单的例子。

代码语言:javascript
复制
$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);
}
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8533432

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档