一、定義：
【1】Less
Less 是一門(mén) CSS 預(yù)處理語(yǔ)言，它擴(kuò)充了 CSS 語(yǔ)言，增加了諸如變量、混合(mixin)、函數(shù)等功能，讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充。Less 可以運(yùn)行在 Node 或?yàn)g覽器端。
【2】Sass
Sass 是一款強(qiáng)化 CSS 的輔助工具，它在 CSS 語(yǔ)法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導(dǎo)入 (inline imports) 等高級(jí)功能，這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫(kù)(如 Compass)有助于更好地組織管理樣式文件，以及更高效地開(kāi)發(fā)項(xiàng)目。
二、相同之處:
###### 【1】變量：
可以單獨(dú)定義一系列通用的樣式，在需要的時(shí)候進(jìn)行調(diào)用。
###### 【2】混合(Mixins)：
class中的class(講一個(gè)class引入到另一個(gè)class，實(shí)現(xiàn)class與class之間的繼承)，還可以帶參數(shù)的混合，就像函數(shù)一樣。
###### 【3】嵌套：
class中嵌套class，從而減少代碼的重復(fù)。
###### 【4】運(yùn)算：
提供了加減乘除四則運(yùn)算，可以做屬性值可顏色的運(yùn)算。
三、區(qū)別:
【1】實(shí)現(xiàn)方式：
Less是基于JavaScript，是在
客戶端進(jìn)行處理的；
Sass是基于Ruby，是在服務(wù)器端進(jìn)行處理的。
【2】實(shí)現(xiàn)方式：
Less定義變量時(shí)使用前綴：
@；
Sass定義變量時(shí)使用前綴：$
//Less定義變量：
@color: #4D926F;
header {
color: @color;
}
//Sass定義變量:
$blue : #1875e7;
div {
color : $blue;
}
【3】混合(Mixins)：
Less中使用混合時(shí)，只需在classB中根據(jù)classA的命名來(lái)是用；
Sass中首先在定義混合時(shí)需要使用@mixin命令，其次在調(diào)用時(shí)需要使用@include命令來(lái)引入之前定義的混合。
//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可以變量可以理解為都是全局的，但可以通過(guò)在變量后面跟!default，在引入Sass文件之前改變變量的屬性值來(lái)解決這一問(wèn)題。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-689089.html
//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中增加了
條件語(yǔ)句(if、if…else)和循環(huán)語(yǔ)句(for循環(huán)、while循環(huán)和each循環(huán))還有自定義函數(shù)：文章來(lái)源地址http://www.zghlxwxcb.cn/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循環(huán)：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
### 【4】while循環(huán)：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
### 【5】each循環(huán)，類似于for循環(huán)：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
### 【6】自定義函數(shù)：
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
到了這里，關(guān)于【Css】Less和Sass的區(qū)別:的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
