簡(jiǎn)介

        本文介紹less與sass(scss)的區(qū)別。

編譯環(huán)境

less環(huán)境較sass簡(jiǎn)單

less：通過客戶端處理的（基于JavaScrip）。

    法1：引入less.js來處理代碼輸出css到瀏覽器。

    法2：開發(fā)環(huán)節(jié)使用less，編譯成css文件放在項(xiàng)目中。一般用 nmp或yarn將less和less-loader添加到項(xiàng)目里。

sass：通過服務(wù)端處理。相比less解析速度會(huì)快一點(diǎn)

    需要安裝Ruby環(huán)境。

上手難度

less：容易上手

sass：上手難度略高

語(yǔ)法

less：變量符是@

sass：變量符是$

變量的作用域也不一樣

less：{}內(nèi)定義的變量為局部變量。

Sass3.4.0之前：沒有局部變量，滿足就近原則。（3.4.0之后已修復(fù)）

功能

條件語(yǔ)句

less

不支持條件語(yǔ)句

scss

支持if{}else{}、for{}循環(huán)語(yǔ)句

/** if else */
@if lightness($color) > 30% {
	/**	do....*/
} @else {
	/**	do....*/
}


/**	循環(huán)*/
@for $i from 1 to 10 {
  	.border-#{$i} {
    	border: #{$i}px solid red;
  	}
}

輸出設(shè)置

less

沒有輸出設(shè)置

sass

提供4中輸出選項(xiàng)：nested, compact, compressed 和 expanded

1. nested：嵌套縮進(jìn)的css代碼
2. expanded：展開的多行css代碼
3. compact：簡(jiǎn)潔格式的css代碼
4. compressed：壓縮后的css代碼

引入外部css

less

引用外部文件和css中的@import沒什么差異。

scss

        scss引用的外部文件命名必須以_開頭，文件名如果以下劃線_開頭的話，sass會(huì)認(rèn)為該文件是一個(gè)引用文件，不會(huì)將其編譯為css文件。

如下例所示：其中_test1.scss、_test2.scss、_test3.scss文件分別設(shè)置的h1 h2 h3。

// 源代碼：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";

// 編譯后：
h1 {
  font-size: 17px;
}
 
h2 {
  font-size: 17px;
}
 
h3 {
  font-size: 17px;
}