前言
在项目开发过程中使用UI组件库也经常需要手动编写元素样式,若使用原生CSS开发,效率会大幅降低且容易怀疑人生(写重复的样式很烦躁),所以本文介绍的是预编译Scss常见的姿势。
嵌套
Scss
支持样式嵌套 省去了古老的方式:
//82年古老的
.a{
color:red;
}
.a .a_main{
border:1px solid red;
}
//使用了Scss现代版
.a{
color:red;
.a_main{
border:1px solid red;
}
}
作为front end 会更心仪后者。
公共变量声明
在Scss中可以声明公共变量,也就是说变量值可复用。
Vue项目的公共变量配置步骤:
1.项目根目录 vue.config.js 文件中(没有该文件的自建即可):
module.exports = {
css: {
// css预设器配置项
loaderOptions: {
scss: {
additionalData: `@import "~@/assets/scss/base.scss";` //分号一定不能少,路径要正确
}
}
},
}
2.在响应的路径中创建scss文件 (base.scss):
$background: #142032; //公共背景色
$trendBackground: #172841; //公共模块背景色
$colorBg: #3f5779;
3.重启项目即可在所有Vue文件里全局引用了
A.vue:
<style lang='scss'>
.Card{
background:$background; //预编译后$background为#142032
}
</style>
@mixin
@mixin
可以理解成封装函数,谁想用就引入
@mixin box {
background: #ffff00;
border:1px solid #ffff00;
color:blue;
}
.bigBox {
@include box;
height:200px;
width:200px;
}
.smallBox {
@include box;
height:50px;
width:50px
}
@extend
@extend
继承选择的元素样式 例如:
<div class='error'></div>
<div class='errorSearch'></div>
.error{
width:10px;
height:10px;
background:red;
}
.errorSearch{
@extend .error;
border:1px solid red;
}
如此一来 .errorSearch就继承了.error 的样式,元素类名好看多了 代码量也少了
@function
@function
计算属性的功能
@function r($size){
@return $size / 144 * 1rem;
}
//引用
p{
width:r(600);
}
//编译后
p {
width: 4.1666666667rem;
}
@import
@import
引入公共文件,但弊端是速度慢,只有执行到@import
才会去下载响应的Css文件,这会导致浏览器加载速度降低。
@import '../assets/scss/style.scss';
p{
color:red;
}
小结
Scss大法大大提升了样式开发效率,节省了很多重复代码,也治愈了front end 的心灵,反正我是受不了重复、复杂、(明明可以简化代码量却繁多的现象)。
以上是个人对于日常开发中常用到的多个姿势小结。