scss 與 less 的區別

1. 變量不同： less  @     scss $ 

2. 都可以嵌套，偽類嵌套：&:hover，  scss還可以屬性嵌套：font:{size:10px;weight:bold;family:aral}

3. 插值使用方式不同： less  @{key}    scss  #{$key}

4. 作用域不同， less 存在變量提升   scss 沒有變量提升   $number:1px    @number:1px

5. 都可以運算：@num * 3    @num + 20 ，

　　less 通過 padding:~"20px / 1.5" 進行轉義

　　scss 通過 padding:(20px / 1.5) 進行轉義

　　scss 加減法中 計算單位必須相同，less 加減法中可以不同單位進行運算 

6. 都有函數

　　1. 相同的函數

　　　　四舍五入：width : round(3.4px)　　=>　　width:3px

　　　　百分比：height:pricentage(0.2)　　=>　　height:20%

　　2. 不同的函數

　　　　scss：隨機數：margin:random()　　=>　　margin:1.33333

　　　　less：開方：padding:sqrt(25%)　　=>　　padding:5%

　　3. 自定義函數

　　　　scss：@function sum( $n, $m ) { @return $n + $m }

　　　　　　　font-size:sum(4px , 5px)　　=> 　　fontsize:9px

7. 都有 混入，都能傳參

　　less：.hide{ display:none }    =>　　.box{ .hide }

　　　　　　.hide( @color ){ display:none }    =>　　.box{ .hide(blue) }

　　scss：@mixin show{ display:block }　　=>　　@include show

　　　　　　@mixin show( $color ){ display:block }　　=>　　@include show( color )

8. less 有命名空間

　　#nm(){ .show { display:inline-block } }

　　.box7{ #nm.show }

9. 都能繼承

　　less：$:extend(.line)　　=>　　display:inline

　　scss：@extend .line　　=>　　display:inline

10. 都能合並

　　less：background+  或者  background+_

　　scss：$background:( a : url ,  b : url )　　=>　　background : map-values($background) 或者 zip(background : map-values($background)... )

11. 媒體查詢是基本一樣的

　　less：.box10{ @media all and ( min-width : 768px ) width : 600px  ;  @media all and ( min-width : 1440px) width : 900px} 

12. 條件判斷

　　less：@count:3　　.get(@cn) when (@cn > 4){ width:100px + @cn }　　.box11{ .get(@count) }

　　scss：$count:5　　.box11{ if($count > 4) { wdith : 100px + $count }  @else{ width : 10px + $count } }

13. 循環（遞歸）

　　less：@count2:0　　.get2(@cn) when (@cn < 3){  .get2((@cn+1));  .box-@{cn}{ width:100px + @cn } }　　.get2(@count2)

　　scss：for while each 都可以

　　　　　　@for $i from 0 through 2{ .box-#{$i} { width : 100px + $i } }

14. 導入（實現模塊化）

　　less：@import url

　　scss：@import url