在SASS/SCSS中定义变量覆盖

我之前使用过sass，并且有一个问题与我认为sass中可能或应该存在的功能有关。在SASS/SCSS中定义变量覆盖

是它在所有可能做这样的事情，以及如何：

$base-color: #ffffff; 
.pink { 
    $base-color: #ec008c; 
} 
.green { 
    $base-color: #a4d20e; 
} 
a, .pink a, .green a { 
    color: $base-color; 
}

这将意味着我可以给一个类.pink到<body>元素，这将使该页面“中的所有<a>元素粉”。这虽然是一个简单的例子，看起来像是SASS应该做的事情。

这意味着上述SCSS将汇编所以像这样：

a { 
    color: #ffffff; 
} 
.pink a { 
    color: #ec008c; 
} 
.green a { 
    color: #ec008c; 
}

这是我结束了简化前说，考虑以下因素：

$base-color: #ffffff; 
.pink { 
    $base-color: #ec008c; 
} 
.green { 
    $base-color: #a4d20e; 
} 
.pink, .green { 
    #header #nav li a { 
    color: $base-color; 
    } 
}

应该给我，像这样的东西：

.pink #header #nav li a { 
    color: #ec008c; 
} 
.green #header #nav li a { 
    color: #a4d20e; 
}

这似乎像笑的东西在SCSS/SASS中可行，并且在编码时间和可维护性方面将支付大项目的大量股息。

来源

2011-08-09 Christopher

很明显，在适当的情况下，编译后的CSS会比SCSS需要的时间长很多。 – Christopher

我不知道是否有任何方法使用您提出的语法来使SASS工作，但是您可以使用mixins实现类似的效果。这是我会怎么做：

这将产生以下CSS输出：

a { 
    color: white; } 
#header #nav { 
    color: white; } 
#header #nav li a { 
    color: white; } 

.pink a { 
    color: #ec008c; } 
.pink #header #nav { 
    color: #ec008c; } 
.pink #header #nav li a { 
    color: #ec008c; } 

.green a { 
    color: #a4d20e; } 
.green #header #nav { 
    color: #a4d20e; } 
.green #header #nav li a { 
    color: #a4d20e; }

基本上，你可以建立一个完整的样式表作为一个mixin，然后@include您.pink内混入和.green类。

来源

2011-08-09 10:54:11 nelstrom

似乎'$ base-color'必须传递给'@ minin'，就像这样：'.green {@include headernav（＃a4d20e）; }'etc等，但否则是这个解决方案工作 – Christopher

它正常工作，因为我已经写了它（测试与sass版本3.1.7），但你也可以设置mixin接受参数。在这种情况下，它可能看起来更整洁一些，但是如果你的mixin增长了，你可能会得到更多变量，例如'$ bg-color'，'$ highlight-color'，'$ active-color'，'$ dimmed-color'。在这种情况下，我认为当你包含mixin时，可能会开始混乱地将它们作为参数传递。 – nelstrom

在SASS/SCSS中定义变量覆盖

回答

相关问题