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

【问题标题】：SASS get border color from another parameter?SASS 从另一个参数获取边框颜色？
【发布时间】：2017-04-17 14:21:08
【问题描述】：

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

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

【问题讨论】：

阅读 SASS 的 @extend 部分。 youtube上也有很多关于这个的教程

标签： css sass

【解决方案1】：

仅使用内置函数和语法是不可能的。之前曾多次请求它作为一项功能，例如在 2012 年 (#559) 和 2015 年 (#1603)。后一个问题以以下评论结束：

如果您想共享一个值，请将其提取为 mixin 或占位符。鼓励您非常清楚地展示实现的哪些方面是共享的，哪些是类的“私有”。

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

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

输出：

.primary-button {
    border-top: 10px solid;
    border-color #aaa;
    background-color: #aaa;
}

【讨论】：

好的，我明白了。谢谢你的回答！

【解决方案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");
}

【讨论】：