Scss和Sass

Sass是Sass 3.0 之前的版本

scss 是Sass 3.0 之后的版本

变量

// 语法 $变量名: 变量值; 
$red: red;
.box{
    background: $red;
    border: 1px solid $red;
}

嵌套

ul {
    li {
        list-style: none;
   	    &:hover{
            background: #000;
        }
    }
}

混合mixin (function)

// @mixin name(参1,参2...) {}
// 引用 @include name
@mixin alert {
   color: #fff;
   background: #000;
}
// 参数前需要 $
@mixin sty($col,$bg){
   color: $col;
   background: $bg;
}
.box {
   @include alert;
   .box2{
       @include sty(#fff,#000)
   }
}

继承

.box {
    color: #fff;
    background: #000;
}
.box-end {
    // 继承.box样式
    @extend .box;
    margin: 15px;
}

@import

创建sass文件 文件名前加 _ 不会转义css

_base.scss

@import "/sass/_base.scss";
.box {
   color: #fff;
   background: #000;
}

注释

/*
    会出现在没有压缩过的css里
*/

// 不会出现css里

/*! 压缩css里仍然存在 */