scss基础用法

• html

1. 嵌套

   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;
       
      

2. 变量和运算操作符

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

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

3. 混合

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

4. 继承

   如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @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; 
      }
   }