Question

我试图将我的大脑包裹起来，我假设我需要在某个地方的某个地方使用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

Answer 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;
}

Answer 2

试试这个

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

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

2 个答案: