Question

有没有办法从SASS的另一个参数中获取颜色？

例如：我有10个按钮，每个按钮都有不同的background-color值。他们每个人的border-top也应该是0.5em，但它必须与background-color的颜色相匹配。那么有没有办法写出像border-top: 10px solid $background-color;这样的东西？我知道$代表我自己声明的变量，但你知道我在说什么。

Answer 1

仅使用内置函数和语法无法实现。之前已多次请求该功能，例如2012年（#559）和2015年（#1603）。后一个问题以以下评论结束：

如果要共享值，请将其作为mixin或占位符提取。鼓励您非常清楚地显示实现的哪些方面是共享的，以及什么是＆＃34;私有＆＃34;上课。

如果您在为不同的属性使用相同的值时仍然不想重复自己，请查看issue #109和lifesaver-sass。它提供了一个mixin来执行以下操作：

UIView.animate(
      withDuration: 0.67,
      delay: 2.0,
      animations: {
        conBottom.constant = imageView.frame.height
        self.view.layoutIfNeeded()
      },
      completion: nil
    )

输出：

.primary-button {
    border-top: 10px solid;
    @include save(background-color border-color #aaa);
}

Answer 2

我认为你正在寻找某种插值，如下所示：http://krasimirtsonev.com/blog/article/Two-handy-and-advanced-SASS-features-and-their-limitations。我对这种技术并不是很熟悉。我会像下面的例子一样使用mixin：

<强> HTML

<div class="box box-1"></div>
<div class="box box-2"></div>

<强> SASS

@mixin set-color($color) {
    border-top: solid 1px #{$color};
    background-color: #{$color}; 
}

.box {
    display: block;
    height: 100px;
    width: 100px;
}

.box-1 {
    @include set-color("blue");
}

.box-2 {
    @include set-color("red");
}

SASS从另一个参数中获取边框颜色？

2 个答案: