项目中使用 css 预处理器,可以提高 css 开发效率,合理应用预处理器的特性,也可以提高 css 代码的可维护性。
目前常见的 css 预处理器有三种:less,scss(sass升级版),stylus。不管是哪一种,最基本的variables,extend,mixin,import 这些都是有的,只不过具体的用法和写法各有不同罢了。大家可以根据自己的喜好,选择自己喜欢的预处理器。
我选择的是 scss。具体原因是:element-ui 的theme-chalk 使用 scss 编写,项目中如果也使用 scss,那么后续想改变 element-ui 的主题色,会非常容易。当然不使用 scss,也是可以改变 element-ui 的主题色或是使用自定义主题的,只不过个人觉得比较麻烦。所以,在这里直接选择了 scss。
// scss 写法
.container{
width: 100%;
height: 100%;
.wrap{
max-width: 1200px
}
}
// 以上代码使用css书写
.container{
width: 100%;
height: 100%;
}
.container .wrap{
max-width: 1200px;
}
// scss 写法
.container{
width: 100%;
height: 100%;
background: #409eff;
&:hover{
background: #42b983;
}
}
// 以上代码使用css书写
.container{
width: 100%;
height: 100%;
background: #409eff;
}
.container:hover{
background: #42b983;
}
// scss 写法
.title {
font: {
family: fantasy;
size: 20px;
weight: bold;
}
}
// 以上代码使用css书写
.title{
font-family: fantasy;
font-size: 20px;
font-weight: bold;
}
$color = #2E98FE
.container{
width: 100%;
height: 100%;
background: $color
}
@mixin title-text {
font: {
size: 20px;
weight: bold;
}
color: #2c3e50;
}
.card__title{
width: 100%;
height: 40px;
@include title-text
}
// scss @extend
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
// 以上代码最终编译为
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
@import "foo.scss";
如果在利用脚手架创建项目的时候,没有安装 scss,可执行以下安装命令:
npm install node-sass --save-dev
npm install sass-loader --save-dev
common.scss 公共基础样式
main.scss 入口文件
mixins.scss 混入样式
reset.scss 重置文件
variables.scss 变量
一般情况下,每个系统都有属于自己的一套样式风格。我们可以根据设计规范,定义一套变量,然后在实际的开发中,使用变量编写 css 样式。这样写的好处是什么呢?就是当你的项目已经开发到一半或者已经开发完成进入测试阶段了,这时老板走过来对你说,这个系统怎么是蓝色的呀,改成红色吧。这个时候,再也不需要一个一个文件的修改样式了,只需要修改 variables 中的一个变量就可以了。
variables.scss 文件定义好之后,有两种使用方式:局部引入和全局引入。
mixins.scss 文件类似。
局部引入:在具体的文件中引入。
// App.vue
局部引入,变量只能在被引入的文件中使用。通常,变量在绝大多数文件中都会被用到,如果在每个文件中都要引入一遍,略显麻烦,这个时候就可以考虑全局引入。
全局引入:一次引入,随处可用。
// vue.config.js
module.exports = {
publicPath: './',
outputDir: process.env.VUE_APP_OUTPUT,
css: {
loaderOptions: {
sass: {
prependData: `
@import "@/assets/scss/variables.scss";
@import "@/assets/scss/mixins.scss";
`
}
}
}
}
这里需要注意的是: sass-loader 版本不同,loaderOptions 中 prependData 的属性名不同。
// main.scss
@import "./reset.scss";
@import "./common.scss";
这里注意文件的引入顺序。
// main.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import './assets/scss/main.scss'
Vue.config.productionTip = false
以上,就是我在项目用使用 scss 的方案。
项目地址:
github地址
gitee地址
系列文章:
vue-cli3+ 搭建pc端管理项目(一, 项目创建)
vue-cli3+ 搭建pc端管理项目(二, 不同环境配置[开发,测试,生产])
vue-cli3+ 搭建pc端管理项目(四, 按需引入 element-ui,支持修改主题色)
vue-cli3+ 搭建pc端管理项目(五, axios 使用及封装)