浅比一下，Less和Sass的区别

Posted 2023-04-03 野生小桃子

Less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合(mixin)、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

Sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件，以及更高效地开发项目。

相同之处

1.变量：

可以单独定义一系列通用的样式，在需要的时候进行调用。

2.混合(Mixins)：

class中的class(讲一个class引入到另一个class，实现class与class之间的继承)，还可以带参数的混合，就像函数一样。

3.嵌套：

class中嵌套class，从而减少代码的重复。

4.运算：

提供了加减乘除四则运算，可以做属性值可颜色的运算。

区别

1.实现方式：

Less是基于javascript，是在客户端进行处理的；Sass是基于Ruby，是在服务器端进行处理的。

2.定义变量：

Less定义变量时使用前缀：@；Sass定义变量时使用前缀：$。

``` //Less定义变量： @color: #4D926F;

header

color: @color;

//Sass定义变量

$blue : #1875e7;　

　　div 
　　　color : $blue;
　　

```

3.混合(Mixins)：

Less中使用混合时，只需在classB中根据classA的命名来是用；Sass中首先在定义混合时需要使用@mixin命令，其次在调用时需要使用@include命令来引入之前定义的混合。

``` //Less中的混合： .rounded-corners (@radius: 5px) -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius;

header

.rounded-corners;

footer

.rounded-corners(10px);

//Sass中的混合： @mixin left($value: 10px) 　　　　float: left; 　　　　margin-right: $value; 　　

div 
　　　　@include left(20px);
　　

```

4.解析方式：

Less可以向上/向下解析；Sass只能向上解析。

5.变量的作用域：

Less中的变量有全局和局部之分；Sass可以变量可以理解为都是全局的，但可以通过在变量后面跟！default，在引入Sass文件之前改变变量的属性值来解决这一问题。

``` //Less： @width:100px; h1 @width:200px; width:@width; h2 width:@width;

编译后： h1 width: 200px; h2 width: 100px;

//Sass：

$borderColor:red !default; .border border:1px solid $borderColor;

编译后： .border border: 1px solid red; ```

6.比起Less

Sass中增加了条件语句(if、if...else)和循环语句(for循环、while循环和each循环)还有自定义函数：

``` //if条件句：

p 
　　　　@if 1 + 1 == 2  border: 1px solid; 
　　　　@if 5 < 3  border: 2px dotted; 
　　

//if...else条件句：

@if lightness($color) > 30% 
　　　　background-color: #000;
　　 @else 
　　　　background-color: #fff;
　　

//循环语句：

//for循环：

@for $i from 1 to 10 
　　　　.border-#$i 
　　　　　　border: #$ipx solid blue;
　　　　
　　

//while循环：

$i: 6;
　　@while $i > 0 
　　　　.item-#$i  width: 2em * $i; 
　　　　$i: $i - 2;
　　

//each循环，类似于for循环：

@each $member in a, b, c, d 
　　　　.#$member 
　　　　　　background-image: url("/image/#$member.jpg");
　　　　
　　

//自定义函数：

@function double($n) 
　　　　@return $n * 2;
　　

　　#sidebar 
　　　　width: double(5px);
　　

```

Less和Sass的用法及区别

1、less为css的扩展技术，可向下兼容css，新增特性也使用css语法。
     
2、less与sass使用均需先声明，再使用，less格式为.less，sass格式为.sass和.scss（常用）

3、分类：
    
        （ 1）变量：
                less：@+名称：值        使用：选择器{属性：@名称}
                sass：@+名称：值        使用：选择器{属性名：$名称}
        （ 2）混合固定值
                less：. 名称｛属性:值}     使用：选择器{.名称}
                sass:@mixin声明混合，通过@incl调用
                    @mixin 名称{属性：值}
                    @include 名称:{属性：值}
         （3）带参数混合
                less：. 名称（@名称）{属性：值}
                        .名称（具体值）
                sass：@mixin 名称（￥名称{属性：值}
                    @include 名称（具体值）
         （4）多参数混合
                less：. 名称(@x,@y,@z){属性：值}
                    . 名称（x，y，z）
                sass：@mixin 名称（￥x，￥y，￥z）
                    @include 名称（x，y，z）
         （5）引入方式均为：@import “文件名”，但是sass文件不会合并。