scss基础用法

嵌套

1. 嵌套标签

   .main {
       .top {
           background: red;
       }
   }
   相当于css的
   .main .top
   

2. 嵌套属性

    .font {
        family: Helvetica, sans-serif;
        size: 18px;
        weight: bold;
    }
    
    上面的scss代码相当于下面的css代码
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    
   

变量和运算操作符

变量可包括（字符串、数字、颜色值、布尔值、列表、null值）

wrapperWidth: 500;
wripperHeight: 500;
$nomalWidth: 100;
$nomalHeight: 100;
.main {
    width: wrapperWidth;
    height: wripperHeight;
    .top {
        background: red;
        width: wrapperWidth * 0.2; //可以进行加减乘除运算
        height: nomalHeight;
    }
}

混合

@mixin相当于定义了函数，使用时需用@include(参数)

@mixin setheight($property) {
    height:$property;
    width:$property;
 }

.main {
    background-color: $mainColor;
    border: 1px solid #000000;
    @include setheight(500) 
    .top {
        background-color: $topColor;
        @include setheight(100) 
    }
    .center {
        background-color: $topColor;
        @include setheight(100) 
    }
    .bottom {
        background-color: $topColor;
        @include setheight(100) 
    }
}

继承

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend，使一个选择器的样式从另一选择器继承

.common {
   width: 100;
   height: 100;
}
.main {
   .top {
       width: 100;
       height: 100;
       background-color: red
   }
   .center {
      @extend .top;
       background-color: blue;
   }
   .bottom {
      @extend .top;
       background-color: green; 
   }
}