CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了变量 – 使用选择器名称作为SASS中变量的值大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想获取我正在应用样式的div的ID,并设置一个变量以将该ID作为其值.这是Sass能做的吗?因此选择器#eleven会将变量的值设置为“十一”.

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

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

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

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

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

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

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

解决方法

尝试这样的事情:
@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在任何地方添加变量

大佬总结

以上是大佬教程为你收集整理的变量 – 使用选择器名称作为SASS中变量的值全部内容,希望文章能够帮你解决变量 – 使用选择器名称作为SASS中变量的值所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。