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

自定义函数