在前端vue项目引入scss,使用scss,在scss引用外部文件,在scss中使用变量
程序员文章站
2022-06-27 14:21:27
...
在前端vue项目引入scss,使用scss,在scss引用外部文件,在scss中使用变量
一、Scss是什么?
Sass是成熟、稳定、强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能。
二、操作步骤
1.引入库
代码如下(示例):
npm install node-sass sass-loader --save-dev
完成引入Scss库显示如图
2.设置style的lang属性
代码如下(示例):
<style lang="scss" scoped>
3.使用scss
引用外部scss文件时,要加@,且需在末尾加分号
scss的变量用 $ 符号
叠加样式
<style lang="scss" scoped>
@import "../assets/style/common.scss";
@import "../assets/style/mixin.scss";
$margin: 10px 0;
.loginContainer {
@include wh(250px, auto);
@include flex(column, center, center);
.loginItem {
margin: $margin;
}
}
</style>
总结
good morning上一篇: qml gradient 横向渐变