Skip to content

写在最前

sass好多知识啊,感觉学笃学不完,只记录一下感觉自己会用到的,参考:sass中文网,sass,简明上手指南

注释 ​

scss
/* */css中显示,
//css中不显示,
/*重要注释!*/压缩不会被删掉
/* */css中显示,
//css中不显示,
/*重要注释!*/压缩不会被删掉

导入外部文件 ​

scss
@import "../assets/scss/home.scss";
@import "../assets/scss/home.scss";

变量 ​

属性嵌套 ​

继承 ​

语法: .class

占位符% ​

使用% 声明的代码块,如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起,代码变得十分简洁。

混合 ​

重复代码块,使用混合@mixin命令定义,以及使用@include调用该mixin

编程式写法 ​

循环(三种循环) ​

for ​

  • @for $i from <start> to <end>
  • @for $i from <start> through <end>

TIP

其中$i表示变量,start表示开始值,end表示结束值; through表示包括end这个数值;to表示不包括end这个数值;

while ​

只要@while后面的条件为true就会执行,直到表达式值为false时停止循环;

each ​

自定义函数 ​