Sass

• Sass文件后缀

          .acss（内容为css格式），.sass(内容相对于css为省略{})

• 变量

          变量名格式$name:value,如果value为默认值则这样声明$name:value !default

          引用：$name

          特殊引用：#{$name}

 

          全局引用：通过!global(只有在3.4后续的版本中起作用)

          3.4之前的版本在特定的选择其中对变量的再次赋值会应用到全局中

　　　　

　　　　　　//scss
　　　　$myColor:red;
　　　　div{
　　　　　　$myColor:blue;
　　　　　　color:$myColor;
　　　　}
　　　　h1{
　　　　　　color:$myColor;
　　　　}
　　　　//css
　　　　div{
　　　　　　color:blue;
　　　　}
　　　　h1{
　　　　　　color:blue;
　　　　}
　　　　　//3.4之后的版本
　　　　div{
　　　　　　color:blue;
　　　　}
　　　　h1{
　　　　　　color:red;
　　　　}　　　　　　

          多值变量（数组与map）:

          定义一个多值变量：$list:12px 36px 56px(一维)，$list:12 35,56 89,69 78(多维通过，或者（）分开)

          引用多维变量通过font-size:nth($list,2)结果会是font-size:36px

• 文件的import

          可以用过import像css那样引入一个scss片段

          @import  part.scss（可以省略后缀.scss）,编译器会将被导入的part.scss包含进引入的文件中（会合并成一个文件），如果导入一个css文件，该文件不会被合并，而是像css文件导入一样，使用时发送一个http请求

• 嵌套

          scss文件可以像html文件那样进行层级嵌套

          nav{

               color:red;

               li{

                   

               }

               a{

                    font-size:16px;

               }

          }

          编译之后会生成如下css文件

          nav{color:red}

          nav li{ line-height: normal; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">          nav a{font-size:16px}

 

           //会不会用到属性的嵌套？？？？？？

 

          嵌套跳出：通过@at-root  @at-root(without:media) @at-root(without:all)

           既然要跳出为什么不直接写在外边？？？？？？

• Maxin

          但对某一块代码需要反复使用时，像其他语言中的函数一样，scss也有类似的功能(注意与function的去呗，后边会讲到)

          定义：@maxin name($value1:1,$value2:2){color:$value1;font-size:$value2}

          使用：p{@include name(#333,14px);text-align:center}

• 继承

          当一个选择器需要用到另一个选择器的所有样式是，可以通过继承实现

          实现：通过extend关键字实现

          h1{color:red}

          h2{@extend h1;font-size:15px;}

           注意%的作用：当以%开头的选择器没有被调用时编译结果不会出现该选择器

• Function

• if

          @if condition{

 

               }@else{

 

          }

     三目条件运算符：

          if(condition,value1,value2);

• for

          @for $i form 1 through 3{

               

          }

• each

          each用于对list，map进行遍历

          @each value in list{

 

               }

          @each key,value in map{

 

          }

转载于:https://www.cnblogs.com/gsLiu/p/4894332.html