标签：box background Sass color 000 mixin

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里仍然存在 */

标签：box,background,Sass,color,000,mixin
来源： https://www.cnblogs.com/rain-sparse/p/Sass.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。