我正在使用SASS的SCSS語法來創建動態網格系統，但是遇到了麻煩。我試圖像這樣使網格系統完全動態：$columns: 12;然后我創建像這樣的列：@mixin col-x { @for $i from 1 through $columns { .col-#{$i} { width: $column-size * $i; } }}哪個輸出：.col-1 { width: 4.16667%; }.col-2 { width: 8.33333%;}etc...這很好用，但是我接下來要做的是根據選擇的$ columns的數目動態生成一列由逗號分隔的長列類 -例如，我希望它看起來像這樣：.col-1,.col-2,.col-3,.col-4, etc... {float: left;}我已經累了：@mixin col-x-list { @for $i from 1 through $columns - 1 { .col-#{$i}-m { float: left; } }}但是輸出是這樣的：.col-1 { float: left;}.col-2 { float: left;}etc...我對這里的邏輯以及創建這樣的東西所需的SCSS語法有些困惑。有人有什么想法嗎？
3 回答
江戶川亂折騰
TA貢獻1851條經驗 獲得超5個贊
我想您可能想看看@extend。如果您將其設置為：
$columns: 12;
%float-styles {
float: left;
}
@mixin col-x-list {
@for $i from 1 through $columns {
.col-#{$i}-m { @extend %float-styles; }
}
}
@include col-x-list;
它應該在您的css文件中呈現為：
.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m {
float: left;
}
三國紛爭
TA貢獻1804條經驗 獲得超7個贊
thnx到@davidtheclark是一個更通用的版本：
@mixin attr-x($attr, $attr-count: 10, $attr-steps: 10, $unit: '%') {
$attr-list: null;
@for $i from 1 through $attr-count {
$attr-value: $attr-steps * $i;
.#{$attr}#{$attr-value} {
#{$attr}: #{$attr-value}#{$unit};
}
$attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma);
}
#{$attr-list} {
//append style to all classes
}
}
像這樣使用它：
@include attr-x('margin-left', 6, 5, 'px');
//or
@include attr-x('width');
結果看起來像這樣：
.margin-left5 {
margin-left: 5px; }
.margin-left10 {
margin-left: 10px; }
...
.margin-left30 {
margin-left: 30px; }
.width10 {
width: 10%; }
.width20 {
width: 20%; }
...
.width100 {
width: 100%; }
- 3 回答
- 0 關注
- 774 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消