前言:
Sass是一个用于编写css框架,它解决了直接进行css编写时权重难以控制,嵌套层级多导致代码编写不方便的问题。并且加入了变量定义,混合(可以近似理解为函数),循环,判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数(如颜色加深,颜色淡化)用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。
1、在项目中使用npm安装插件依赖
npm install sass-loader node-sass -D
2、使用sass编写样式代码
在需要使用sass语言进行编写样式代码的组件中。在style标签上加lang=‘scss’,如果还加上scoped表示只在本组件中生效此标签中的样式。
<style lang="scss" scoped>
$bg-color:#ddd; /*sass中声明颜色变量*/
#app{
color:red