Css 带SASS的条件选择器名称
我想生成像Css 带SASS的条件选择器名称,css,sass,Css,Sass,我想生成像grid-col-1,grid-col-md-1,grid-col-lg-1,grid-col-2,grid-col-lg-2 所以,我创建了这个mixin来实现它: $grid-columns: 12; @mixin grid-col-builder($type: false) { @for $i from 1 through $grid-columns { $selector: 'grid-col-'; @if $type { $selector: $selec
grid-col-1
,grid-col-md-1
,grid-col-lg-1
,grid-col-2
,grid-col-lg-2
所以,我创建了这个mixin来实现它:
$grid-columns: 12;
@mixin grid-col-builder($type: false) {
@for $i from 1 through $grid-columns {
$selector: 'grid-col-';
@if $type { $selector: $selector + $type + '-' + $i; }
@else { $selector: $selector + $i; }
.#{$selector} { width: $i/$grid-columns*100%; }
}
}
但我仍然认为代码有点重复。有没有更智能的方法来生成在选择器名称中添加类型的条件?您可以通过使用
if()
函数使内容更加紧凑:
$grid-columns: 12;
@mixin grid-col-builder($type: false) {
@for $i from 1 through $grid-columns {
.#{'grid-col-' + if($type, $type + '-', '') + $i} {
width: $i / $grid-columns * 100%;
}
}
}