更新说明:对文章排版以及内容格式做了调整。
更新时间: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.