变量 – 使用选择器名称作为SASS中变量的值

前端之家收集整理的这篇文章主要介绍了变量 – 使用选择器名称作为SASS中变量的值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想获取我正在应用样式的div的ID,并设置一个变量以将该ID作为其值.这是Sass能做的吗?因此选择器#eleven会将变量的值设置为“十一”.

这是当前的代码.首先是我正在使用的mixin:

@H_404_4@@mixin left-icon ($bgcolor,$bgurl,$iconmargin) { background: $bgcolor url(images/#{$bgurl}.png) no-repeat left 5px center; & h2,& p {margin-left: $iconmargin;} }

这就是我打电话给mixin的时候:

@H_404_4@#eleven { @include left-icon(#de4c3f,eleven,$defaulticonmargin); }

因此,当我使用mixin时,会有背景颜色,文件名的一部分以及设置的边距值(添加到某些子选择器中).如您所见,$bgurl变量与选择器的名称相匹配.基本上我想自动化,以便将$bgurl设置为ID中的文本字符串(剥离哈希符号).

原因是我将拥有数十个具有相同基本模式但具有独特背景图像的盒子,在我看来,最简单的事情就是使用ID名称作为文件名保存每个PNG.然后让萨斯与他们相匹配.我可以这样做,就像我在这里所做的那样,并且将价值放在一边,但看起来Sass可能会这样做,所以我宁愿花时间去做正确的事情,更多地了解Sass而不是半个工作.

希望这是有道理的并且不是一个荒谬的愚蠢问题 – 我会承认(并且你不会惊讶地听到)我是一个非常原始的Sass新兵,但我想我可以从这个问题中学习.

解决方法

尝试这样的事情: @H_404_4@@mixin left-icon ($bgcolor,$iconmargin) { ##{$bgurl} { background: $bgcolor url(images/#{$bgurl}.png) no-repeat left 5px center; & h2,& p {margin-left: $iconmargin;} } } @include left-icon(#de4c3f,10px);

基本上,您可以使用Sass的interpolation syntax在任何地方添加变量

猜你在找的CSS相关文章