[英]SCSS concatenation with selectors
我想要實現的是簡單地循環並根據變量有多少列創建一個選擇器。
$numberOfColumns: 16;
.gridContainer {
@for $i from 1 through $numberOfColumns {
.grid_#{$i} @if $i != $numberOfColumns {,}
{position:relative;}
}
}
這顯然不起作用。
我想輸出這樣的東西:
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16 {position:relative;}
任何幫助都會很棒。
您可以簡單地使用join
來創建一個包含所有逗號分隔類的變量,然后再使用它。 方法如下:
$numberOfColumns: 16;
$classes: ();
@for $i from 1 through $numberOfColumns {
$classes: join($classes, unquote(".grid_#{$i} "), comma);
}
.gridContainer {
#{$classes} { position:relative; }
}
產量:
.gridContainer .grid_1, .gridContainer .grid_2, .gridContainer .grid_3, .gridContainer .grid_4, .gridContainer .grid_5, .gridContainer .grid_6, .gridContainer .grid_7, .gridContainer .grid_8, .gridContainer .grid_9, .gridContainer .grid_10, .gridContainer .grid_11, .gridContainer .grid_12, .gridContainer .grid_13, .gridContainer .grid_14, .gridContainer .grid_15, .gridContainer .grid_16 {
position:relative;
}
以下是對相同概念的更全面解釋: http : //portfolio.miphe.com/showcase/sass-dry-selectors/
像這樣的情況通常要求使用占位符選擇器 :
有時你會為一個你只想要
@extend
的類編寫樣式,而且永遠不想直接在你的HTML中使用。 在編寫Sass庫時尤其如此,如果需要,可以為用戶提供@extend
樣式,如果不需要則忽略。[...]
占位符選擇器看起來像class和id選擇器,
#
或者除外.
被%
替換。 它們可以在類或id可以使用的任何地方使用,並且它們本身可以防止將規則集呈現給CSS。
使用占位符選擇器,您可以收集單個規則中所有網格列通用的所有屬性:
%grid-column {
// common column properties...
}
然后使用@extend
指令將.grid-container .grid-i
選擇器添加到占位符規則:
$num-grid-cols: 2;
.grid-container {
@for $i from 1 through $num-grid-cols {
.grid-#{$i} {
@extend %grid-column;
// grid-$i specific properties...
}
}
}
生成的CSS將如下所示:
.grid-container .grid-1, .grid-container .grid-2 {
// common column properties...
}
.grid-container .grid-1 {
// grid-1 specific properties...
}
.grid-container .grid-2 {
// grid-2 specific properties...
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.