前端:带你入门Sass

1.SASS:一套利用Ruby语言编写的 最早最成熟 的 CSS预处理器
       它扩展了CSS 语言，增加了 变量 混合 嵌套 函数 运算 等特性


2.SASS有两种文件后缀  .sass(不需要写大括号，通过缩进来表示层级结构) 和 .scss(需要写大括号，以表示层级结构)


3.sass中的变量：
            3.1定义变量：$变量名:值;例如 $w:300px;
            3.2使用变量: 例如：width:$w;
            3.3特点：后定义的变量会覆盖前面定义的   变量有全局和局部之分


4.sass中的变量差值
            4.1格式：#{变量名称}:值；例如(事先定义 $w:100px;$wid:width) #{$wid}:$w;(等价于 width:100px)


5.sass中的运算：例如div{
                        margin-top:100px/2;
                        left:50%*0.6;
                        height:100px+50;
                       }


6.sass中的混合：
            6.1定义混合：@mixin 混合名(可选)称{代码...}
            6.2使用混合：@include 混合名称(可选)
            6.3带参混合：@mixin 混合名(形参1，形参2 ...0){代码...}
                   例如: @mixin setWH($w,$h){
                            width:$w;
                            height:$h;
                        }
            6.4指定默认参数
                    例如：@mixin setWH($w:100px,$h:100px){
                           width:$w;
                           height:$h;
                          }


7.sass中的可变参数：必须通过定义形参$args...
              例如：@mixin myAnimate($args){
                    transition:$args;
              }


8.sass中导入其它sass文件：
            @import 文件名称 例如：@import "xxx.sass"


9.sass中的层级结构：
                默认括号中的会依据层级转化为 后代选择器
                如果需要伪类选择器：
                              例如:div{
                                        width:100px;
                                        height:100px;
                                        &:hover:{
                                            color:red;
                                        }
                                      }


10.sass中的继承:
                10.1先定义一个类：
                            例如：.center{
                                            position:absolute;
                                            left:50%;
                                            top:50%;
                                            transform:translate(-50%,-50%);
                                         }
                10.2继承
                            例如：div{
                                   @extend .center;
                                    }


11.sass中的条件判断[下面是一个绘制三角形的例子]
                11.1 例如：@mixin triangle($width,$color,$direct){
                                                          width:0;
                                                          height:0;
                                                          border-width:$width;
                                                          @if($direct=='up'){
                                                                border-color:$color transparent  transparent  transparent;
                                                          }@else if($direct=='down'){
                                                                 border-color:transparent  transparent $color  transparent;
                                                          }@else if($direct=='left'){
                                                                   border-color:transparent  transparent  transparent $color;
                                                          }@else{
                                                                 border-color:transparent  $color transparent  transparent;
                                                          }
                                                     }


12.sass中的循环
            12.1 for循环
                    格式1：@for $i form 起始整数 through 结尾整数{
                                                           逻辑...
                                                        }
                           特点：循环次数包头包尾
                    格式1：@for $i form 起始整数 to 结尾整数{
                                                           逻辑...
                                                        }
                           特点：循环次数包头不包尾


            12.2 while循环
                    格式: $i:5;
                          @while($i<=8){
                            逻辑代码...
                            $i:$i+1;
                          }