具有相同名称但基于类的不同结果的 Sass 变量？答案

【问题标题】：Sass variables with same names but different outcomes based on class?具有相同名称但基于类的不同结果的 Sass 变量？
【发布时间】：2014-01-30 19:59:39
【问题描述】：

我试着把我的大脑包裹起来，我认为我需要一个 if 语句。

但我希望能够用 sass 做到这一点。但这只会采用green 颜色并忽略默认颜色而不管类。

SASS

//  Default Colours --------------------------------------------------------------
     $textColor: #FFF; 

.green {
   //  Base Colours --------------------------------------------------------------
     $textColor: green; 
}

body {
    text: $textColor
}

HTML

<p>jamie</P> //Output is #FFF

<p class="green">jamie</P> //Output is green

【问题讨论】：

您为什么希望这会起作用？

标签： html css sass

【解决方案1】：

这是一个你可以使用的小混音。

$base-color: green;

@mixin change-var($var: $base_color, $selector: x, $property: color) {

    @if $selector == x {
        $var: blue;
    } @else if $selector == y {
        $var: green
    } @else {
        $var: $var;
    }

    #{$property}: $var; 
}

用法：

.x {
    @include change-var($base-color, x, color)
}
.y {
    @include change-var($base-color, y, background-color)
}

输出：

.x {
  color: blue;
}

.y {
  background-color: green;
}

【讨论】：

【解决方案2】：

试试这个

$textColor: #fff; 
body {
  color: $textColor;
}
.green {
  $textColor: green; 
  color: $textColor;
}

【讨论】：

这将用green的值永久覆盖$textColor。