【Css】Less和Sass的区别:-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Css】Less和Sass的区别:。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、定义：

【1】Less

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

【2】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循环)还有自定义函数：文章来源地址https://www.toymoban.com/news/detail-689089.html

### 【1】if条件句：
p {
　@if 1 + 1 == 2 { 
　	border: 1px solid; 
　}
　@if 5 < 3 { 
　	border: 2px dotted; 
　}
}

### 【2】if...else条件句：
@if lightness($color) > 30% {
　　background-color: #000;
} @else {
　　background-color: #fff;
}

### 【3】for循环：
@for $i from 1 to 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

### 【4】while循环：
$i: 6;
@while $i > 0 {
　　.item-#{$i} { width: 2em * $i; }
　　$i: $i - 2;
}
　　
### 【5】each循环，类似于for循环：
@each $member in a, b, c, d {
　　.#{$member} {
　　　　background-image: url("/image/#{$member}.jpg");
　　}
}

### 【6】自定义函数：
@function double($n) {
　　@return $n * 2;
}
 
#sidebar {
　width: double(5px);
}