Sass 入门

       

            1.定义： 

                     1.Sass 是一种流行的css预处理器语言。       

 

              2.CSS预处理器：

                        1.它使用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件。

 

              3.为什么使用CSS预处理器?

                        1.为CSS添加编程语言中的特性（添加变量，逻辑程序，函数等），使CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护。

 

              

       1.添加变量

       $color: red;     // $color 为一个变量。

       .test {
           color: $color;   
       }    

 

　　　　   4.Sass 与 Scss 是同一个东西，但有两个不同点：

                    1.  文件后缀名 ：   .Sass 与 .Scss 。

                       2.  语法书写方式：   Sass使用严格的缩进语法并且不带{} 和 ; ，而Scss与Css语法类似。 

 

       Sass 

       $width: 200px  // 定义变量
       $height: 300px  // 定义变量

       body 
          width: $width
          height: $height

       Scss

       $width: 200px;
       $height: 300px;

       body {
         width: $width;
         height: $height;  
       }

　　　　 编译后的CSS:

        body {
　　　　　　　width: 200px;
            height: 300px;
        }

                      

                  5.Scss 与 CSS 的写法没有差别 ：

                      1.可将.css文件直接修改成.scss文件使用。

 

                6. Scss是 Sass 的新语法格式，Scss 更为前端开发人员所接受和使用。