「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」。

sass和less出现的背景

css的语法不够强大，不能嵌套书写，导致模块化开发中会出现很多重复的选择器，没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护，增加了许多工作量。而使用CSS预处理器，提供了 CSS 缺失的样式层复用机制、减少冗余代码，提高了样式代码的可维护性。极大的提高了我们的开发效率。

什么是CSS预处理器

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。

转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。

但是，CSS预处理器也不是全能的，CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦。

Sass和Less的比较

不同之处

1、Less环境较Sass简单

Cass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。

2、Less使用较Sass简单

LESS 并没有裁剪 CSS 原有的特性，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。只要你了解 CSS 基础就可以很容易上手。

3、从功能出发，Sass较Less略强大一些

①sass有变量和作用域

$variable，like php；
#｛$variable｝like ruby；
变量有全局和局部之分，并且有优先级。

②sass有函数的概念

@function和@return以及函数参数（还有不定参）可以让你像js开发那样封装你想要的逻辑。
-@mixin类似function但缺少像function的编程逻辑，更多的是提高css代码段的复用性和模块化，这个用的人也是最多的。
-ruby提供了非常丰富的内置原生api。

③进程控制：

-条件：@if @else；
-循环遍历：@for @each @while
-继承：@extend
-引用：@import

④数据结构：

-l i s t 类型 = 数组； − list类型=数组； -list类型=数组；−map类型=object；
其余的也有string、number、function等类型

4、Less与Sass处理机制不一样

前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点

5、变量在Less和Sass中的唯一区别是Less用@，Sass用$。

相同之处
Less和Sass在语法上有些共性，例如：

1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

为什么选择Sass而不是Less？

1、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation。
2、就讨论的热度来说，Sass优于LESS。
3、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。
4、Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护。
5、同时还有Scss对sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。

sass语法

sass嵌套（选择器嵌套、属性嵌套、伪类嵌套）引入父选择器用&

.nav{ … ul{ … li {  …  } } }  // 复合属性嵌套
a {color:red;&:hover{ color:blue;}}  // 当前作用域下的父对象  
border:{
   style: solid;   // border-style
   left:{
       width:4px;  // border-left-width
   }
}

变量

// $变量名:值;
$size:12px; $flag:false;  // 定义变量，变量名须以$开头
body{ font-size: $size ; color:#f00; }
普通变量: $变量名  // 属性值
特殊变量: #{$变量名}  // 变量作为属性或者其他的特殊情况

选择

@if 条件{语句组;}@else if 条件{语句组;}@else{语句组;}
@if $flag{ .nav p{color:red;}} @else{ .nav p{ color:blue;}}

循环

@for  $变量  from <start> through <end>{语句组;}    // 如果值后面加上!default就表示默认值
@for  $变量  from <start> to <end>{语句组;}   // 不包括最后一项
@for $i from 1 through 3{  // through也可写为to，区别为to不包含结束值
    .item-#{$i} { width:2em*$i;} 
} // #{}取变量的值，表示.item1、.item2、.item3，{}是变量，以$开头
 
$m:8;
@while $m > 0 {   // while 循环
    .items-#{$m} {
        width:2em*$m;
    }
    $m:$m - 2 ; 
}   // 这里可以对$m进行运算 让它每次都减去2

数组

$数组名 : 值  值  值;（用空格或逗号分隔都可）

Map

$map名: (key : value,key : value);
方法：length($map)、map-get($map,key)、map-keys($map)、map-values($map)、
map-has-key($map,key)、map-merge($map,$map)合并、map-remove($map,key)

遍历

@each $变量 in 数组{语句组;}
@each $img in q,w,e,r {
    #{$img} {
        background-image:url('#{$img}.png')
    }		
}  // each 语法

@mixin宏

@mixin 宏名 {内容}
@mixin 宏名($变量,$变量){内容}
调用宏: @include 宏名
@mixin public($width,$height){ width:$width;margin:0 auto;}   
// @minxin（宏：跟函数作用同，没有函数灵活）
// @mixin public($width:1000px,$height:300px){…}  可写默认参数，有默认参数即使引用时不传参也不会报错。数值设置与默认参数不同时，传对应参数值即可。如果存在没有设置默认值的参数，写在参数最前面即可
#footer{ @include public(300px);}
// 也可将公共部分用@mixin public{}定义，然后用@include引用，不同之处是①@mixin方式可以传参；②第一种编译后默认会合在一起，第二种依然独立

函数

@function 函数名(){@return 值;}
调用函数 函数名()
@function double ($number){
   @return  $number*2;
}
.text9{
   font-size:double(20px);
}  // 函数语法

继承

@extend 选择器
.common{ width:$w;border:1px solid #ff0;}
#head{ @extend .common;}
// 把公共属性写在.common里，然后用“@extend .common”继承引用

其它

@charset “utf-8”;  // 文档中中文的编码
sass里的“//”注释不能被css识别，/**/可被css识别

小例子

$colors:(light:#fff,dark:#000);  // 声明一个map
@function  color($key){
   @return  map-get($colors,$key);
}
body{ background:color(light);}  // 编译后变成：body{ background:#fff;}

以上就是sass和less的使用和区别了，希望对大家有帮助。

Sass和Less的区别和使用