【CSS】CSS 预处理器 之 Sass 和 Less 的区别
一、CSS 预处理器
CSS 预处理器是一种脚本语言,用一种专门的编程语言来进行 Web 页面样式设计,然后再转换为正常的 CSS 样式,进而实现构建动态 CSS 样式。
CSS 预处理器为 CSS 增加了一些编程的特性,无需考虑浏览器的兼容性问题。
Sass 和 Less 就是两种常见的 CSS 预处理器,我们可以把 Sass 和 Less 编辑的样式转换为正常的 CSS 样式。他们引入了变量、mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等,加快了 CSS 开发效率。
二、Sass 和 Less 的区别
1. 主要区别(实现方式):Less在JS上运行,Sass在Ruby上使用。
Less基于JavaScript,通过npm安装,在客户端处理 ;Sass基于Ruby,需要安装Ruby,在服务器处理。
为了使用Less,我们可以将适用的JavaScript文件上传到服务器或通过脱机编译器编译CSS表。
2. 编写变量的方式不同。
Sass使用$,而Less使用@。
3. 在Less中,仅允许循环数值。
在Sass中,我们可以遍历任何类型的数据;但在Less中,我们只能使用递归函数循环数值。
4. Sass有Compass,Less有Preboot
Sass和Less有可用于集成mixins的扩展(在整个站点中存储和共享CSS声明的能力)。
Sass有适用于mixins的Compass,其中包括所有可用的选项以及未来支持的更新。
Less有Preboot.less,LESS Mixins,LESS Elements,gs和Frameless。Less的软件支持比Sass更加分散,导致许多不同的扩展选项可能不会以相同的方式运行。对于项目,我们可能需要所有列出的扩展以获得与Compass类似的性能。
三、Sass 和 Less 的选择
很多开发者不会选择 Less,因为JavaScript引擎需要额外的时间来处理代码,然后输出修改过的CSS到浏览器。
四、Less详细
扩展文件名的格式是 xxx.less
变量:@
// Less // @变量名:值 @width:100px; .box{ width:@width; }
混合:
// Less // 定义classa,然后可以将classa引入到classb中 .classa(a){ width:@width; } .classb{ .classa(a); }
嵌套规则:
父级{ 子集 }
函数和运算:
// 可以将值计算 @the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 10%); }
五、Sass详细
扩展文件名的格式是 xxx.scss 或者是 xxx.sass
变量:$
// Sass // $变量名:值 $width:100px; .box{ width:$width; } 如果变量包含字符串则写在 #{}之中 $c:color; .box{ border-#{$c}:red; }
继承:同Less混合相同,定义classa,然后可以将classa引入到classb中。
//使用方法 定义classa .classb{ @extend .classa }
嵌套规则:同Less嵌套规则相同。
Mixin:重用代码块
//使用方法,先用@mixin命令定义一个代码块 @mixin left(参数1,参数2){ float:left; margin-left:10px; } //使用@include调用刚刚定义的代码块 .box{ @inclidu left(参数1,参数2); }
插入文件:
@import命令插入外部文件, .scss和css都可。
条件语句:
//@if 可以用来判断, @else 则是配套 .box{ @if 1+1>1 {width:100px;} @else { width:200px; } }
循环语句:
// @for @while @each //@for @for $i from 1 to 10{ border-#{$i}{ border:#{$i}px solid red; } } //@while $i:6; @while $i>0{ .item-#{$i}{ width:2em*$i; } $i:$i-2; } //@each @each $member in a, b, c, d { .#{$member} { background-image: url("/image/#{$member}.jpg"); } }
自定义函数:
@function name($n){ @return $n*2; } .box{ width:name(value); }
参考:
END