【vue】scss的安装及基本用法_style lang="scss

【vue】scss的安装及基本用法

在vue项目中的引用方式，指定语言为scss

<style lang='scss' scoped>
</style>
1
2

安装依赖包

npm install node-sass sass-loader --save-dev
npm i node-sass sass-loader style-loader -D
选择其中一种安装方式

配置loader

{
   test: /\.scss$/,
   loader: 'sass-loader!style-loader!css-loader',
}
1
2
3
4

scss基本用法

1.变量的使用

（1）以$开头声明变量
（2）变量具有作用域的。
（3）变量中连接符中划线和下划线是互通的。
例：声明一个错误信息的颜色值

<span class="error">错误文字</span>
<span class="error2">错误2</span>

<style lang="scss" scoped>
$error-color:red;
.error{
    color: $error-color;
}
.error2{
    color: $error_color;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12

2.样式嵌套

sass中的嵌套形式是在外层选择器中，嵌入其后代的选择器。在复杂的多层样式下，用sass会比css方便得多。

<div>
    <p>我是个p标签
       <a>我是个a链接</a>
    </p>
    <div class="back"></div>
</div>
1
2
3
4
5
6

用sass实现

div{
    p{
        font-size: 48px;
        a{
            color: green;
        }
    }
    .back{
        height: 50px;
        width:200px;
        margin-left: 45%;
        background-color: yellow;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

css的写法（效果等同）

div p{font-size: 48px;}
div p a {color: green;}
div .back{
    height: 50px;
    width:200px;
    margin-left: 45%;
    background-color: yellow;
}
1
2
3
4
5
6
7
8

这种嵌套的规则，也可以应用于伪类，在sass用“&”指代了外层的选择器，例如在a标签中，添加hover的效果

a{
    color: green;
    &:hover{
        color: hotpink;
    }
}
1
2
3
4
5
6

div p a:hover{color: hotpink;}

3.混入样式

混入样式的关键字是mixin和include。可固定样式，也可传入参数修改。

@mixin box-border{
    border: 5px solid #ccc;
    border-radius: 4px;
}
.error{
    @include box-border
}
@mixin boxs-border($border-color:#ccc){
    border: 5px solid $border-color;
    border-radius: 4px;
}
.error2{
    @include boxs-border(green)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.样式继承

样式继承的关键字是extend，使用继承可以把样式拷贝到另一个类。

.errorys{
    @include boxs-border(green)
}
.error2{
    @extend .errorys
}
1
2
3
4
5
6

效果同上。

5.导入文件

导入文件的关键字是import，在sass中可以导入sass文件,也可以导入css文件，省略文件名时，默认导入sass文件。

@import “xxx.sass”

参考博文：https://blog.csdn.net/u014789022/article/details/87854962