簡介

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

編譯環境

less環境較sass簡單

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

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

    法2：開發環節使用less，編譯成css文件放在項目中。一般用 nmp或yarn將less和less-loader添加到項目里。

sass：通過服務端處理。相比less解析速度會快一點

    需要安裝Ruby環境。

上手難度

less：容易上手

sass：上手難度略高

語法

less：變量符是@

sass：變量符是$

變量的作用域也不一樣

less：{}內定義的變量為局部變量。

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

功能

條件語句

less

不支持條件語句

scss

支持if{}else{}、for{}循環語句

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


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

輸出設置

less

沒有輸出設置

sass

提供4中輸出選項：nested, compact, compressed 和 expanded

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

引入外部css

less

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

scss

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

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

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

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