sass的常用命令

后续持续将补充。。。

@mixin

// 声明mixin模块，无参数传递
@mixin base-border-wrap {
    position: relative;

    &:after {
        display : block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background-color: red;
    }
}

// 带参数传递，可设置默认值
@mixin card($px: 1px, $color: orange) {
    position: relative;
    
    &:after {
        height: $px;
        color: $color;
    }
}

// 使用该规则集中模块
.box {
    height: 100px;
    font-size: 18px;
    width: 21px;
    // 在其他选择器中引入mixin
    //  sass代码规范中 @include 一定要放在当前选择器所有属性之后,嵌套的选择器之前
    @include base-border-wrap();
    
    .other {
        // 使用时前置的入参不能为空，否则会报错，如： @include card(, blue);
        @include card(2px, blue);
        // ...
    }
}
复制代码

循环指令：

@for

• 写法一：@for $i from <start> through <end>

@for $i from 1 through 3 { 
    .width#{$i} { 
        width: $i * 10px; 
    }
}

// 生成效果如下：
// .width1 { width: 10px;}
// .width2 { width: 20px;}
// .width3 { width: 30px;}
复制代码

• 写法二：@for $i from <start> to <end>

@for $i from 1 to 3 { 
    .width#{$i} { 
        width: $i * 10px; 
    }
}

// 生成效果如下：
// .width1 { width: 10px;}
// .width2 { width: 20px;}
复制代码

• 两种写法的区别在于to命令不包含end结束， through包含

@while

$num: 12;
@while $num < 18 {    
    .f-#{$num} { ont-size: #{$num}px; }    
    $num: $num + 2;
}
// 效果：
// .f-12 {  font-size: 12px;}
// .f-14 {  font-size: 14px;}
// .f-16 {  font-size: 16px;}
复制代码

@each

• 写法： @each $i in <list>

$list: 5 10 15 20 25;
@each $i in $list {    
    .p-#{$i}{
        padding: #{$i}px;
    }
}

// 效果：
// .p-5 {  padding: 5px;}
// .p-10 {  padding: 10px;}
// .p-15 {  padding: 15px;}
// .p-20 {  padding: 20px;}
// .p-25 {  padding: 25px;}
复制代码