使用

npm安装

1. package.json中加入下面依赖，高版本会报错，所以我在这里安装的是低版本
   "node-sass": "^4.0.0",
"sass-loader": "^7.3.1",
2. 终端窗口运行npm install
3. 在<style>标签中加入scss，即可标签中书写scss样式
   <style lang="scss" scope>
</style>

特性

变量

1. 定义
   $属性名:属性值
2. 有作用域
3. 下换线_与横线-互通兼容，但是个人建议还是要命名规范

嵌套

1. 可以实现嵌套，在编译css文件时会自动添加父元素，以空格间隔
2. 属性也可以实现嵌套

文件导入

scss与css中@import的区别

1. css

• 在执行到@import语句时才下载，导致页面加载慢

2. scss

• 在scss文件转换为css文档时就会导入；
• 被导入文件夹中变量和混合器都可以在导入文件中使用；
• 可以省略后缀；

局部文件

1. 定义

• 不需要生成css文件的scss文件
• 文件名以下换线_开头

2. 导入

• @import导入时可以不写全称，即省略其文件名前的下划线‘ _ ’

3. 默认变量值

• !default：若用户未定义则用默认值，已定义则用定义值

4. 嵌套导入

• 直接在css规则内导入即可生效

5. css原生导入

• 三种生成css原生@import的情况
  – 以.css后缀结尾
  – 导入的是URL地址
  – 导入的是css的url()值
• 解决情况：直接将.css后缀改为.scss，因为sass兼容css

静默注释

原生css注释

1. /*注释*/
2. 会出现在生成的css文件中

静默注释

1. //注释
2. 单行注释
3. 不会在生成的css中出现

混合器

1. 作用
   大段样式的重用使用
2. 定义
   @mixin 混合器名
3. 使用

• @include 混合器名
• 可嵌套css的规则，选择器及属性
• 可以给混合器传参
• 混合器可以有默认值

选择器

1. 父元素选择器&

• 因为添加父元素选择器时以空格分隔，所以有时候会出现问题，如 :hover不需要空格分隔
• &:hover即可实现正常的样式

2. 群组选择器,
   和css中的选择器一直，可以选择多项元素，增强代码复用性

• 多父单子
• 单父多子

3. 子组合选择器>
   选择父元素下第一层的子元素
4. 同层组合选择器

• 同层相信组合选择器+：选择该元素后紧跟的选择元素
• 同层全体组合选择器~：选择该元素后的选择元素，无距离障碍

选择器继承

1. 使用
   @extend 选择器
2. 与混合器相比
   只重复选择器，生成代码少
   根据权重选择应用样式