共计 994 个字符，预计需要花费 3 分钟才能阅读完成。
-
理解 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: ‘ 文件门路 ’
正文完