-
理解 Less 与 Sass
- Less 与 Sass 都是css的拓展语言
- less 和 sass 最次要的区别是less是通过Javascript编译，而sass是通过ruby编译的
- 如果没有引入前端工程化，less会耗费客户端性能，sass会耗费服务端性能
- 引入前端工程化的话，gunt，gulp，webpack等，less和sass在打包阶段都会转化成css，所以不会有区别，只是sass是基于ruby，所以每次npm的时候绝对慢一点点
-
Less 与 Sass 之间的区别
Less Sass 变量定义 @变量名：值 $变量名：值 变量应用 属性：@变量名 属性：$变量名 插值应用 @变量名：属性名
@{变量名}：属性值
选择器@{变量名}{}$变量名：属性名
#变量名：属性值
选择器#{变量名}{}作用域 就近准则应用
可先应用，后定义就近准则
必须先定义后应用嵌套应用 后辈选择器(两个都反对)：
选择器1{
选择器2{
选择器3{}
}
}伪类选择器(两个都反对)：
选择器1{
选择器2{
选择器3&:hover{}
}
}
款式嵌套（Sass反对）：
font:{size:16px;
weight：500
}运算符 + – * / Sass ‘/’ 默认为分隔符 本义 转为分隔符：~”20px/1.5“ 转为除号：(20px/1.5) 函数 四舍五入：round 百分比：percentage
随机数（Less不反对）：randm自定义函数(两个都反对) @function 函数名(参数){
@return 返回值
}混入 定义：
.hide(@参数)
应用：
.hide(参数)定义：
mixin show(参数){}
应用：
选择器(@inculude show;)命名空间 定义：
#name(参数){}
应用:
#nm.show;Sass不反对 继承 被继承：
选择器{}
应用继承：
&extend(选择器)被继承：
%选择器{}
应用继承：
@extend(%选择器)合并 逗号合并：款式名+：值
空格合并：款式名+_：值须要合并内容
$款式名{a:\_\_,b:__}
逗号合并：
map-value($款式名)
空格合并：
zip(map-value($款式名)…)媒体查问 与CSS文件写法雷同 条件 when关键字 @if @else @else if 循环 递归思维 @for() 引入文件(两个都反对) @import: ‘文件门路’
发表回复