为了账号安全,请及时绑定邮箱和手机立即绑定

SCSS / SASS:如何动态生成包含逗号的类列表

/ 猿问

SCSS / SASS:如何动态生成包含逗号的类列表

智慧大石 2019-11-15 21:13:32

我正在使用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 回答

?
慕雪9262066

我想您可能想看看@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;

}


查看完整回答
反对 回复 2019-11-15
?
芜湖不芜

还有一种方法可以解决您的问题特别要求的内容:生成(并使用)带有逗号分隔的类列表。D.Alexander的回答完全适合您的情况,但是如果有其他用例正在研究此问题,我将发布此替代方法。


这是一支笔演示:http : //codepen.io/davidtheclark/pen/cvrxq


基本上,您可以使用Sass函数来实现所需的功能。具体来说,我正在使用append将类添加到列表中(以逗号分隔)的方式,unquote以避免与类名中的句点发生编译冲突。


所以我的mixin最终看起来像这样:


@mixin col-x {

  $col-list: null;

  @for $i from 1 through $columns {

    .col-#{$i} {

      width: $column-size * $i;

    }

   $col-list: append($col-list, unquote(".col-#{$i}"), comma);

  }

  #{$col-list} {

    float: left;

  }

}

希望能帮助到别人。


查看完整回答
反对 回复 2019-11-15
?
三国纷争

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%; }


查看完整回答
反对 回复 2019-11-15

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信