我正在使用SSS的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...
这很好，但我想做的下一步是动态生成一个列表类的长列表，以逗号分隔，基于选择的$列数 – 例如我想它看起来像这样：
- .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语法创建这样的东西。
有没有任何想法？
谢谢
解决方法
我想你可能想看看@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;
- }
希望这可以帮助！
