[英]How to DRY Sass code using variables?
我的设计使用颜色来标识网站的各个部分。 我放置了一个定义了颜色变量的文件,因为它们可以更改,并且很难在CSS文件中进行跟踪。
$people: #D50000;
$galleries: #D500AA;
$projects: #D5BA00;
//etc...
我的类的名称与变量的名称匹配。 例如,导航菜单类似于:
<ul>
<li class="people">People</div>
<li class="galleries">Galleries</div>
<li class="projects">Projects</div>
<!-- etc... ->
</ul>
我发现自己写SASS就像
#nav {
ul {
li.people { border-left: 5px solid $people; }
li.galleries { border-left: 5px solid $galleries; }
li.projects { border-left: 5px solid $projects; }
}
}
我想干燥一下。 我尝试使用mixins,但是我不知道如何告诉SASS查找以我传递的参数命名的变量(变量间接)。 我有类似的东西:
@mixin menu-states($resource) {
li.#{$resource} a { // This works
border-left: 7px solid $#{$resource}; // But this doesn't...
}
}
有人对如何干燥这个有建议吗? 谢谢。
该代码对我有用
@mixin test($resource: "red"){
$updated: unquote($resource);
li.#{$updated} a{
border-left: 7px solid $updated;
}
}
您不能这样做,但是可以将2个变量传递给mixin,一个用于类,另一个用于颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.