【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);
}

参考：

https://m.php.cn/article/413479.html

https://www.jianshu.com/p/e3f1fcbbccc3

END