菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-张佳豪-2023629 [打印本页]

作者: 张佳豪 时间: 2023-6-29 19:36
标题: 前端-张佳豪-2023629
CSS预处理器
CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)，

CSS预处理器可以让你的 CSS 更加简洁，适应性更强，代码更直观等诸多好处

简而言之: CSS预处理器就是升级版CSS

常见的CSS预处理器： Less、 Sass 、Stylus

SASS(Syntactically Awesome Stylesheets Sass)、
SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年.

它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展

LESS和SASS文件后缀名区别
LESS以.less结尾

SASS以.sass或者.scss结尾

两种不同结尾方式区别: .sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号

                        .scss以{}表示层级结构, 语句后面需要写分号

                        企业开发中推荐使用**.scss结尾**

注意点: scss需要大括号和分号结尾。

sass中注释
ASS中的注释和LESS一样
单行注释不会被编译(不会出现在编译后的文件中)
多行注释会被编译  (会出现在编译后的文件中)

SASS中的变量
1.SASS中的变量
SASS中的变量和LESS中一样, 只是定义格式不同
LESS中定义变量 @变量名称: 值;
SASS中定义变量 ==$变量名称: 值;==

2.SASS中变量特点
SASS中变量特点和LESS中几乎一样
2.1 后定义覆盖先定义
2.2 可以把变量赋值给其它变量
2.3 区分全局变量和局部变量(访问采用就近原则)

注意点: LESS中变量是延迟加载, 可以先使用后定义
         SASS中变量不是延迟加载, 不可以先使用后定义

SASS中的变量插值
1.什么是变量插值?
如果是属性的取值，可以直接使用变量,
但是如果是属性名称或者选择器名称，并不能直接使用变量, 必须使用变量插值的格式

2.SASS中的变量插值
SASS中的变量插值和LESS中也一样, 只不过格式不一样
LESS变量插值格式: @{变量名称}
SASS变量插值格式: #{$变量名称}

SASS中的运算
SASS中的运算和LESS也一样, 都支持+ - * / 运算
注意点: 无论是LESS中的运算还是SASS中的运算都需要加上()

任意前后任一个需要带上单位（200px /2）或者（200 /2px）

SASS中的混合
SASS中的混合和LESS中也一样, 只是定义格式和调用的格式不同
LESS中混合定义: .混合名称{} 或者 .混合名称==()=={}
LESS中混合调用: .混合名称; 或者 .混合名称==()==

SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){};
SASS中混合调用: @include 混合名称; 或者 @include 混合名称();

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)