SCSS汇总

介绍

1. SCSS 和 Sass 的关系：
   • Sass3 之前的写法跟css差距太大，后面出了一个新的语法，叫SCSS，SCSS写法跟CSS很接近。
   • 参考：知乎

---

语法

1. ::v-deep :
   • 作用：它的出现是为了解决一个问题，当我们的子组件在写样式的时候使用了scoped,父组件是没办法再修改子组件的样式的，这是因为加了scoped后，编译出来的样式后面都会跟着一个[data-XXXX]，类似于js中模块的原理，组件与组件之间的样式不再相互影响。
   • 误解：我之前一直以为是只要修改子组件的样式，就一定要使用::v-deep
   • 对比图：

     
     

   • 参考：掘金
   • 补充：

     >>>、|deep|和 ::v-deep 的区别 ：

     1. 三者作用相同，语法不同。
     2. >>> 只适用于css，在sass和less 的预编译器无法识别
     3. >>> 和 |deep| 在 vue3中，安装了dart-sass，会不不支持这两种语法。
     4. 结论：还是推荐使用::v-deep
     5. 参考：CSDN

     ---

2. mixin:
   • 介绍：混入，类似于vue中的mixin, 作用都是为了提取公共的东西，方便管理和开发。
   • 语法：

     // 创建
     @mixin bg($color) {
     	background-color: $color; 
     }
     // 使用
     .use-mixin {
     	@include: bg(red);
     }
     

   • 参考：简书

   ---

3. 导入：
   与js相比，import 前面多了@， 路径前面多了~

   // 例子
   @import "~@/assents/index.scss";
   

---

4. 定义变量：
   • @开头，:对应

     // 例子
     $bg: red;
     

   • 参考：CSDN

   ---

5. @if... @else...
   • 参考：官网

   ---

6. @for 和 @each 循环
   • 参考：博客园
7. @mixin 和 @include 混入属性
   • 参考：sass中mixin的用法
8. 总结：
   • 变量$开头，其他自带的语法@开头。