更新说明：对文章排版以及内容格式做了调整。
更新时间：2022-05-04

变量使用

  • 全局使用：使用$varaible格式定义变量，比如全局的主题色，可在common.scss中定义，通过@import的方式引用即可
  • 局部使用：在本文件中创建变量$themeColor = red,然后直接使用，存在块级作用域。

CSS原生可通过定义 -- 变量名结合var函数的方式来达到这一目标。

混合使用(mixins)

  • 可在common.scss中使用@mixin varibaleName{}的方式定义 多次重复使用的样式，通过@include的方式应用。
  • 还可以使用@mixin varibaleName(varib1 varib2 varib3){} 的方式传入自定义的属性，进行代码复用，比如可以将 flex布局使用mixin的形式，传入变量使用。

嵌套

嵌套功能避免了重复输入父选择器，令复杂的CSS结果更易于管理。

导入

  • @import 导入，文件扩展名为.scss或.sass
  • 可同时导入多个文件 @import ‘bar’,‘foo’;

&使用

  • 在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，比如hover、first-child等使用。
  • &还有一个使用情况是: .main{ &-content{}}，这里经过编译后就是 .main-content.