526互联

2.sass

发布时间 2023-07-06 16:57:42作者: cjl2019

1. 变量：$

//1.常规
$myColor:red;
.first{
    color:$myColor;
}
//2.局部作用域
.second{
    $myColor:red;
    color:$myColor;
}
//3.全局作用域
.third{
    $myColor:red !global;
    color:$myColor;
}

 

2. 嵌套

很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。
在 Sass 中，我们可以使用嵌套属性来编写它们： 
$myFontSize:10px;
$myFontWeight:bold;
.index{
    .first{
        font:{
            size:$myFontSize;
            weight:$myFontWeight;
        }
    }
}

 

3. 导入

css在使用@import指令的时候，每次都会创建一个额外的http请求。sass就不需要额外的http请求。
新建一个文件：src/assets/sass/reset.scss 
<style scoped lang="scss">
import "./../assets/sass/reset"; //导入时不需要加后缀
</style>

 

4. 混入：@mixin/@include

//1.常规
//Sass的连接符号 - 与 _ 是相同的，也就是 @mixin my-text{}与 @mixin my_text{}是一样的。
@mixin my-text{
    color:red;
}
.index{
    @include my-text;
}

//2.带变量的混入
@mixin my-border($width,$color){
    border:$width solid $color;
}
.index{
    @include my-border(1px,red);
}

//3.不确定参数的混入
//不确定使用多少个参数，这时可以使用 ... 来设置可变参数。
//例如，用于创建盒子阴影（box-shadow）的一个混入（mixin）可以采取任何数量的 box-shadow 作为参数。
@mixin box-shadow($shadow...){
    box-shadow:$shadow;
}
.index{
    @include box-shadow(0 4px 5px #666,2px 6px 10px #999);
}

 

5. 继承：@extend

.basic-class{
    color:red;
    background:pink;
}
.index{
    .first{
        @extend .basic-class;
        border:1px solid green;
    }
}