sass(scss)-＞主,less,postcss,stylus

1.sass,less,stylus区别

sass需要ruby环境

Less需要引入less.js(浏览器)

stylus需要安装node

2.sass(scss->sass第三代)

Sass3 -> Scss(Sassy CSS),SCSS(Sassy CSS) 是 CSS 语法的扩展.

3.scss注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

4.scss定义变量

Variables: $

全局变量与局部变量

 

关于scss变量类型,我们看官网给的:

5.scss引入

6.混合指令 (Mixin Directives)

 定义混合指令 @mixin和 引用混合样式 @include:

传参方式:

还可以了解一下一下官网提及的情况:

有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理：

7.scss继承@extend

8.对比混合指令和继承

混合模式下产生的代码冗余比较多.

@mixin 和 @include 更侧重于定义和复用一组样式，而 @extend 更侧重于样式的继承和扩展。

@mixin 和 @include 的优点包括：

• 可以传递参数，实现更复杂的样式定制。
• 对于不相关的样式组合，更具组织性和可读性。

@extend 的优点包括：

• 减少代码重复，尤其是在类之间有相似样式时。
• 更直观地表达样式之间的继承关系。

9.scss运算符基本使用

这里自己参考一下文档就行了哈

Sass教程 Sass中文文档 | Sass中文网

10.scss函数

①color:

  //颜色变亮lighten($color,$amount(0-100%))

  //颜色变暗darken($color,$amount(0-100%))

  //降低透明度opacify($color,$amount(0-1))

11.scss@use和@forward

高级版@import和export