css预处理器-sass(scss)

一、安装

        sass基于Ruby语言开发，安装sass前需在官网安装Ruby

然后在vue中使用npm进行安装：npm install sass -g;npm install sass-loader;npm install node-sass

二、定义

        sass是强化css的辅助工具，它在 CSS 语法的基础上增加了变量、嵌套 、混合、导入等功能

三、语法格式

        sass有两种格式，一种是缩进格式，它使用缩进代替花括号表示属性属于某个选择器，用换行代替分号分隔属性；另一种是scss，它在 CSS3 语法的基础上进行拓展，同时加入 Sass 的特色功能，支持大多数css写法，这种格式以.scss作为拓展名

四、使用

1、变量

        sass使用$符号定义变量，变量的作用域只在当前的层级有效，可以使用!global将变量设置为全局

2、嵌套

        单纯的css在设置样式时需要重复书写选择器，sass可以将css变成类似于html的嵌套，避免重复书写，编译后会变成正常的css

3、导入

        sass的@import规则在生成css文件时就把相关文件导入进来，所有相关的样式被归纳到了同一个css文件中，无需发起额外的下载请求。

4、混入

        使用@mixin 指令定义一个可以在整个样式表中重复使用的样式，然后使用@include指令将混入引入到文档中，混入中也可以使用混入和变量

5、继承

        @extend指令可以让一个选择器的样式从另一选择器继承，当一个样式与另一个样式区别不大时可以使用该指令