携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
SCSS-了解和基本使用
scss、sass、less、css的区别
scss、sass和less都是css的预处理语言（也是对应的文件后缀名），它们的功能比css更加强大
预处理语言使用是：开发时用预处理语言，在打包上线时，用webpack再配合loader工具给转成css（Cascading Style Sheets）给浏览器使用。
细节：
1. 后缀名：
SASS（Syntactically Awesome StyleSheets）版本3.0之前的后缀名为.sass，
而版本3.0之后的后缀名.scss
2. 语法规范：
sass没有{}和;
有严格的缩进规范 ;
scss和css的缩进规范是一致的
我们在实际开发过程中，scss是常用写法
scss-基本语法
- 嵌套语法、&父选择器、变量、mixins、模块、注释、继承
嵌套语法
和less一样。scss同样支持嵌套型的语法
变量
定义变量：scss用$符号来识别变量,重复声明会覆盖
父选择器 &
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。
还可以使用 >
混合 mixins
mixins混入，是代码复用的方式
定义格式：@mixin 名称 { 代码 }
使用格式：include 名称
定义样式:
使用mixins
模块
一个.scss文件就是一个模块，多个.scss文件之间可以相互引用。
例如：在base.scss定义变量，然后在test.scss中引入这个文件，就可以使用其中定义的变量了
并不需要导出
例:只需要使用: @import './base.scss'
就可以使用其中的变量了
注释
注释分为三种：/* * /css中显示，//css中不显示，/* 重要注释! */压缩不会被删掉。
继承@extend
语法 : 继承 .class 使用 @extend
