CSS预处理器 之 sass

后续持续将补充。。。

嵌套规则

1. 命名空间共享嵌套

.test {
    color: red;
    font: {
        size: $size-12;
        weight: 300;
        family: "microsoft"
    }
}
/*
    编译结果： 
    .test {
        color: red;
        font-size: 12px;
        font-weight: 300;
        font-family: "microsoft";
    }
*/

2. 父选择器标识 &

.test {
    color: red;
    &:hover {
        color: blue;
        font-size: 18px;
    }
    & a {
        text-align: right;
    } 
}
/*
    编译后结果：
    .test {
        color: red;
    }
    .test:hover {
        color: blue;
        font-size: 18px;
    }
    .test a {
        text-align: right;
    }
*/

3. 属性嵌套

.test {
    margin: {
        left: 12px;
        right: 12px;
        top: 24px;
        bottom: 24px;
    };
    border: 1px solid {
        top-color: #d33838;
        bottom-color: #5018d3;
        right-color: #ffeeee;
        left-color: black;
    };
}
/*
    编译后结果：
    .test {
        margin-left: 12px;
        margin-right: 12px;
        margin-top: 24px;
        margin-bottom: 24px;
        border: 1px solid;
        border-top-color: #d33838;
        border-bottom-color: #5018d3;
        border-right-color: #ffeeee;
        border-left-color: black;
    }
*/

继承

@extend

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

/*
    编译后的css：
    .button-basic, .button-report, .button-submit {
      border: none;
      padding: 15px 30px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }

    .button-report  {
      background-color: red;
    }

    .button-submit  {
      background-color: green;
      color: white;
    }
*/

嵌套指令

@import

1. scss 样式文件间的引用

@import  "filename"; // 引入filename.scss样式文件

2. 文件内样式的引用

.example {
  color: red;
}
#main {
  @import "example";
}
/*
#main部分编译后样式： 
    #main .example {
      color: red;
    }
*/

混合指令

@mixin / @include

// 声明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);
        // ...
    }
}

循环指令：

对于循环指令，我个人是一直想知道怎么将这个指令的使用与js使用结合，就是不知道是否存在这样的语法规则。。。有没有大佬路过给剧透下呢。。。

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