Sass基础

基础语法

scss里加{},加“;”

sass里不加{},不加“;”

根据个人习惯,使用scss

自动编译为可执行css文件

//sass
.header {
    span{
        color: red;
    }
    &:active{
        color: blue;
    }
    &:hover{
        color: green;
    }
}
// css
.header span {
  color: red;
}

.header:active {
  color: blue;
}

.header:hover {
  color: green;
}
 

变量入门

方便批量管理统一的样式

$text-color:#555;
$small-font:14px+3px;

嵌套 代码拆分及引入

嵌套

减少代码重复次数

div{
    span{
    // div span 
        color:red;
        a{
        // div span a 
            color:blue;
        }
    }
}

拆分,引入

把代码拆分成若干个scss文件,在名称前面加“_”

@import 'header';

Mixin混入的使用

@mixin singleline-ellipsis($width){
    width:$width;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.text{
@include singleline-ellipsis(500px)
}

媒体查询与Mixin的配合使用

// 代表include 后花括号里面的内容
@content
最后修改:2021 年 07 月 28 日 12 : 17 AM