SCSS技术笔记

269 阅读1分钟

1、用**&**代替父容器

image.png 2、占位符选择器,“ %+标识名 ”编写被继承的样式代码,用“@extend %+标识名”继承

image.png

3、变量在scss中,“$变量名:值

image.png

4、默认值在值后面加上“!default

image.png

5、import引入,只需要“import '文件名';”即可,注意在scss中文件名中带“_”和不带的文件名是一样的。

6、mixin混入,写法类似函数。

image.png

7、在scss中支持运行符比较运行符、逻辑运行符、数字运算符、字符串运算符等

image.png

注意除法运算符比较特殊,只有以下几种情况才可以运用

image.png

注意:如果有引号字串位于+的左边连接无引号字串,远算结果是有引号的 如"foo"+bar="foobar",foo+"bar"=foobar

8、插值语句“#{……}”

image.png

9、scss有很多封装的函数供我们使用,链接如下(Sass: sass:list (sass-lang.com))

10、@for

image.png

11、@each

image.png

12、@while

image.png

13、if($condition,$if-true, $if-false); 判断$condition,如果条件成立,则返回if-true的结果,如果条件不成立,则返回if-false的结果