我可以为选择器使用变量吗?
Posted
技术标签:
【中文标题】我可以为选择器使用变量吗?【英文标题】:Can I use variables for selectors? 【发布时间】:2012-09-26 11:12:57 【问题描述】:我有这个变量:
$gutter: 10;
我想在像 SCSS 这样的选择器中使用它:
.grid+$gutter
background: red;
所以输出变成了 CSS:
.grid10
background: red;
但这不起作用。有可能吗?
【问题讨论】:
【参考方案1】:如果它是供应商前缀,在我的情况下,mixin 没有编译。所以我用了这个例子
@mixin range-thumb()
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
input[type=range]
&::-webkit-slider-thumb
@include range-thumb()
&::-moz-range-thumb
@include range-thumb()
&::-ms-thumb
@include range-thumb()
【讨论】:
【参考方案2】:$gutter: 10;
.grid#$gutter
background: red;
如果在字符串中使用,例如在 url 中:
background: url('/ui/all/fonts/#$filename.woff')
【讨论】:
我有一个类似的问题,也涉及在 CSS 选择器中使用变量。我的问题很长,所以我创建了一个 pastebin:pastebin.com/FkdNSaG7【参考方案3】:来自Sass Reference on "Interpolation":
您还可以使用 # 插值语法在选择器和属性名称中使用 SassScript 变量:
$gutter: 10;
.grid#$gutter
background: red;
此外,使插值工作不需要@each
指令,并且由于您的$gutter
只包含一个值,因此不需要循环。
如果您有多个值要为其创建规则,则可以使用 Sass list 和 @each
:
$grid: 10, 40, 120, 240;
@each $i in $grid
.g#$i
width: #$ipx;
...生成以下输出:
.g10 width: 10px;
.g40 width: 40px;
.g120 width: 120px;
.g240 width: 240px;
Here are some more examples..
【讨论】:
【参考方案4】:解决办法
$gutter: 10;
@each $i in $gutter
.g#$i
background: red;
【讨论】:
这只输出.g10以上是关于我可以为选择器使用变量吗?的主要内容,如果未能解决你的问题,请参考以下文章