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

标题: 前端-20230703 [打印本页]

作者: 陌殇 时间: 2023-7-10 18:51
标题: 前端-20230703
本帖最后由陌殇于 2023-7-10 18:56 编辑

一、学习内容

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中混合定义: .混合名称{} 或者 .混合名称==()=={}
LESS中混合调用: .混合名称; 或者 .混合名称==()==
SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){};
SASS中混合调用: @include 混合名称; 或者 @include 混合名称();
SASS中的条件判断
和LESS一样SASS中也支持条件判断, 只不过SASS中的条件判断支持得更为彻底
SASS中支持
@if(条件语句){}
@else if(条件语句){}
... ...
@else(条件语句){}
SASS中当条件不为false或者null时就会执行{}中的代码
和LESS一样SASS中的条件语句支持通过> >= < <= ==进行判断

SASS中的循环
SASS比LESS牛逼的地方就在于SASS中直接支持循环语句, 而LESS中需要通过混合+条件判断自己实现
SASS中支持两种循环, 分别是for循环和while循环
for循环
@for i from 起始整数 through 结束整数{}
@for i from 起始整数 to 结束整数{}
两者的区别 through包头包尾, to包头不包尾
while循环
@while(条件语句){}

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