sass

声明变量

$color:#eee;
$font-size:14px;
//sass的声明使用$符号

引用变量

代码：

$color    :blue;
$font-size:14px;

body {
    background-color: $color;
    height          : 300px;

    button {
        font-size: $font-size;
    }
    a {
        text-decoration: none;
        color          : #000;
        //    &代替父元素
        &:hover {
            color: red;
        }
    }}
/*   ~  该元素后面所有元素
     >   选择一个元素的直接子元素
     +   选则该元素后紧跟的相邻元素
*/

混合函数引用：

$color    :blue;
$font-size:14px;

body {
    background-color: $color;
    height          : 300px;

    button {
        font-size: $font-size;
    }
    a {
        text-decoration: none;
        color          : #000;
        //    &代替父元素
        &:hover {
            color: red;
        }
    }}
/*   ~  该元素后面所有元素
     >   选择一个元素的直接子元素
     +   选则该元素后紧跟的相邻元素
*/

调用函数：

body{
    button{
        color: $error;
        @include border-rad;
        @include border(2px,solid,red);
    }
    a{
        @include border-rad;
    }
    ul{
        @include h-ul;
        // $s:dotted 虚线
        @include border($w:2px,$s:dotted,$c:red);
    }

导出函数 @mixin name{} 引用函数 @include name 嵌套函数：

// 嵌套
// 声明函数/混入  可以嵌套其他东西  把相同的属性加入
@mixin border-rad {
    border-radius: 50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
}

继承：

    div{
        border: 1px solid red;
        background-color: red;
    }
    // 继承div的样式
    span{
        @extend div;
        font-size: 20px;
        background-color: transparent;
    }
}