【vue】scss的安装及基本用法
在vue项目中的引用方式,指定语言为scss
<style lang='scss' scoped>
</style>
安装依赖包
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',
}
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>
2.样式嵌套
sass中的嵌套形式是在外层选择器中,嵌入其后代的选择器。在复杂的多层样式下,用sass会比css方便得多。
<div>
<p>我是个p标签
<a>我是个a链接</a>
</p>
<div class="back"></div>
</div>
用sass实现
div{
p{
font-size: 48px;
a{
color: green;
}
}
.back{
height: 50px;
width:200px;
margin-left: 45%;
background-color: yellow;
}
}
css的写法(效果等同)
div p{font-size: 48px;}
div p a {color: green;}
div .back{
height: 50px;
width:200px;
margin-left: 45%;
background-color: yellow;
}
这种嵌套的规则,也可以应用于伪类,在sass用“&”指代了外层的选择器,例如在a标签中,添加hover的效果
a{
color: green;
&:hover{
color: hotpink;
}
}
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)
}
4.样式继承
样式继承的关键字是extend,使用继承可以把样式拷贝到另一个类。
.errorys{
@include boxs-border(green)
}
.error2{
@extend .errorys
}
效果同上。
5.导入文件
导入文件的关键字是import,在sass中可以导入sass文件,也可以导入css文件,省略文件名时,默认导入sass文件。
@import “xxx.sass”
参考博文:https://blog.csdn.net/u014789022/article/details/87854962