sass 语法用法一

sass 语法用法总结

碎碎念：都是一些自己在学习过程中的一点体会，如果有什么不对的感谢大家指正一起学习！

一、全局变量和局部变量

 $变量名

在局部变量后面加 !global 可变成全局变量

二、属性嵌套

三、选择器嵌套

内层样式将它外层的选择器作为父选择器

sass写法：

css写法：

四、 @mixin、@include

Mixin混合器，可包含任意内容且可以传递参数，通过@include来调用

1.基本用法

2. mixin 传参（一个参数）

2.1 一个参数

2.2 默认参数

3.mixin多个参数

不同写法对比：

五、运算

在css基础上sass新增加减乘除等新功能

六、选择器继承

一个选择器继承另一个选择器的所有样式，@extend 实现

七、其他归纳

1. 变量在运算中的格式：
   关键字： #{ }

 $height:20px;
 height:calc(100% - #{ $height})

2. sass样式引入
   在css中，在样式表b中导入样式表a,在加载的时候，会先加载a，再加载b。
   在sass中，在样式表b中导入样式表a，会将他们先编译成一个文件再加载。
   （在b.scss中的样式优先a.scss）

@import 关键字

---

以上只是基础使用，等深入了解了解锁更多用法，持续更新。

mixin刚开始很不习惯，用到后面，真香~~