前言：
首先，小編給大家解釋一下什麼是SCSS和LESS，Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compasss）有助於更好地組織管理樣式文件，以及更高效地開發項目。
同樣，Less 也是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製作主題、擴充。
我相信，在大家的心中會與這麼一個疑問，css真的是屬於我們程序猿的語言嗎？因為它不需要邏輯，只需要像寫作文一樣就可以將一個靜態頁面給“寫”出來。而且，在平時的css編譯中，我想大家最在意的就是樣式的權重吧。簡單的樣式還好，複雜樣式那從根目錄開始的辣末長的選擇器真心讓人不忍直視。所以，為了照顧我們程序猿那麼懶得生物，大神們編譯了SCSS和LESS。他們最大的優勢就是可以將css進行類似於邏輯編譯。
| 前言 |
首先，小編給大家解釋一下什麼是SCSS和LESS，Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compasss）有助於更好地組織管理樣式文件，以及更高效地開發項目。
同樣，Less 也是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製作主題、擴充。
我相信，在大家的心中會與這麼一個疑問，css真的是屬於我們程序猿的語言嗎？因為它不需要邏輯，只需要像寫作文一樣就可以將一個靜態頁面給“寫”出來。而且，在平時的css編譯中，我想大家最在意的就是樣式的權重吧。簡單的樣式還好，複雜樣式那從根目錄開始的辣末長的選擇器真心讓人不忍直視。所以，為了照顧我們程序猿那麼懶得生物，大神們編譯了SCSS和LESS。他們最大的優勢就是可以將css進行類似於邏輯編譯。
| 前言 |
首先，小編給大家解釋一下什麼是SCSS和LESS，Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compasss）有助於更好地組織管理樣式文件，以及更高效地開發項目。
同樣，Less 也是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製作主題、擴充。
我相信，在大家的心中會與這麼一個疑問，css真的是屬於我們程序猿的語言嗎？因為它不需要邏輯，只需要像寫作文一樣就可以將一個靜態頁面給“寫”出來。而且，在平時的css編譯中，我想大家最在意的就是樣式的權重吧。簡單的樣式還好，複雜樣式那從根目錄開始的辣末長的選擇器真心讓人不忍直視。所以，為了照顧我們程序猿那麼懶得生物，大神們編譯了SCSS和LESS。他們最大的優勢就是可以將css進行類似於邏輯編譯。
一、最常用的輔助工具——scss
雖然SASS和LESS同樣為css輔助工具，但是大部分都比較喜歡使用SASS，想要知道原因，讓小編給你解釋！
1.1SCSS基本語法
1、scss中的變量
聲明變量：$變量名：變量值；
而且，在SCSS中，允許將變量嵌套在字符串中，但是變量必須使用 ${} 包裹
1.1SCSS基本語法雖然SASS和LESS同樣為css輔助工具，但是大部分都比較喜歡使用SASS，想要知道原因，讓小編給你解釋！
1、scss中的變量
聲明變量：$變量名：變量值；
而且，在SCSS中，允許將變量嵌套在字符串中，但是變量必須使用 ${} 包裹
1.1SCSS基本語法雖然SASS和LESS同樣為css輔助工具，但是大部分都比較喜歡使用SASS，想要知道原因，讓小編給你解釋！
1、scss中的變量
聲明變量：$變量名：變量值；
而且，在SCSS中，允許將變量嵌套在字符串中，但是變量必須使用 ${} 包裹
看到聲明變量的$符，是不是覺得很熟悉？沒錯！jQuery中的獲取節點使用的也是$。所以在大部分的網頁編譯中，大部分都使用scss，便是為了編譯時更舒服。不會有使用兩種語言的感覺。
2、scss中的運算，會將單位進行運算，使用時需注意最終的單位是否正確。
eg:10px * 10px =100 px*px;
3、scss中的嵌套：選擇器嵌套 屬性嵌套 偽類嵌套
在scss的使用中，我們通常把選擇器嵌套和偽類嵌套一起使用。因為這會極大地節省scss的代碼量；
①選擇器嵌套 ul{li{}}
嵌套默認表示後代選擇器，如果需要子代選擇器，可以在選擇器前加>;可以在選擇器的{}中，使用&表示上一層的選擇器。
②偽類嵌套： li{&:hover{}}
在選擇器的{}中，使用&配合偽類事件，可以表示當前選擇器的偽類。
③ 屬性嵌套： font:{size:18px;}
對於屬性名有-分割為多段的屬性，可以使用屬性嵌套，屬性名的前半部分必須緊跟一個：才能用{}包裹屬性的後半部分。
屬性嵌套類似於聲明一的對象；對象名為屬性名-以前的名字；對象裡面的鍵名為-以後的屬性名；值為想要設置的值；
4、註釋
//註釋一：編譯時不會被編譯到css文件中
/*
註釋二：在非compressed壓縮模式下，會被編譯到css文件中。
* */
/*!
註釋三：重要註釋。在各種壓縮模式下，都會被編譯到css文件中
* */
1.2混合宏、繼承、佔位符
1、混合宏：使用@mixin聲明混合宏，在其他選擇器中使用@include調用混合宏。
混合宏有三種方式；
第一種方式：無參數；
@mixin hunhe{} .class{@include hunhe;}
第二種方式：有參數無默認值；
@mixin hunhe(@param){} .class{@include hunhe(value);}
第三種：有參數有默認值；
@mixin hunhe(@param:value){} .class{@include hunhe();}
優缺點：
優點：①可以傳參 ②不會產生同名的class
缺點：調用時，會把混合宏中所有的代碼copy到選擇器中，產生大量重複代碼
2、繼承：聲明一個普通class，在其他選擇器中使用@extend繼承這個class；
.class{ } .class{ @extend.class1;}
優缺點：
優點：將相同代碼，提取並集選擇器，減少冗餘代碼；
缺點：①不能傳參；②會產生出一個多餘的class；
3、佔位符：使用%聲明佔位符，在其他選擇器中使用@extend 繼承佔位符；
%class1{} .class1{@extend %class1;}
優缺點：
優點：①將相同代碼，提取到並集選擇器，減少冗餘代碼；②不會生出一個多餘的代碼
缺點：不能傳參
1.3條件語句、循環、函數
scss作為css的輔助工具，賦予了css類似於js的一些功能，例如循環、if條件語句、函數等；其中，一定要記得@符號的使用！！！
1、if條件結構：
條件結構需要卸載選擇器裡面，條件結構的大括號直接包裹樣式屬性。
@if 條件{}
@else{}
2、for循環：有著兩種方式，類似於開區間和閉區間；
@for $i from 1 to 10{} //不包含10
@for $i from 1 through 10{} //包含10
3、while循環；
先使用$符定義一個變量，然後進行條件判斷，在{}中進行循環；
4、each 循環遍歷
@each $item in a,b,c,d{
//$item 表示a,b,c,d的每一項
}
5、函數
scss也可以想js一樣進行函數的調用；
二、Less
less作為和scss同等地位的css輔助工具，在一些方面有著相同點，另一方面也有這他的優點；
2.1less基本語法
1、聲明變量：@變量名：變量值
使用變量：@變量名
相對於scss，less變量的聲明使用@符號；並且，變量一般使用在多次頻繁出現的值，後期需要統一修改的值，牽扯到數值運算的值，推薦使用變量
>>>less中的變量類型
在css中出現的屬性值，在less中都可以用作變量名
①數值類： 不帶單位的 123 帶單位的 1px
②字符串：帶引號的 "hahahaah" 不帶引號的 red #ff0000
③顏色類： red #ff0000 RGB(255,255,0)
④值列表類型： 多個值用逗號或空格分隔 10px solid red
2、混合(Mixins)，我們也親切的叫做“米心”；相當scss的混合宏，同樣有著三種方式：
①無參數混合；實際上就是一個普通的class選擇器，會被編譯到css文件中；
聲明： .class{}
調用：在選擇器中，使用.class;直接調用
②有參無默認值混合：
聲明：.class(@param){}
調用:.class(paramValue);
③有參有默認值混合：
聲明：.class(@param：10px){}
調用:.class(paramValue); 或 .class();
>>>如果聲明時沒有給參數賦默認值，則調用時必須賦值，否則報錯；
有參混合，在編譯時，不會出現在css文件中；
2.2匹配、@argument、嵌套
1、LeSS的匹配默認
①聲明,類似於switch語句；
@pipei(條件一，參數){} @pipei(條件二，參數){} @pipei(@_，參數){}
②調用：
@pipei(條件的值，參數的值){}
③匹配規則：
根據調用時輸入的條件值，去尋找與之匹配的混合執行；
2、@arguments 特殊變量：
在混合中，@arguments表示混合傳入的所有參數。@arguments中的多個參數，用空格分隔。
4、Less嵌套
less中允許css選擇器按照HTML的結構進行嵌套。 相當於scss的選擇器嵌套與偽類嵌套的組合；
有兩點值得注意；
①less的嵌套，默認是後代選擇器。如果需要自帶選擇器，需要在前面加>；
②&符號，表示這個&所在的上一層表達器；比如上述嵌套：&:hover相當於section ul:hover
三、less＆scss的使用
作為css的輔助工具，需要其操作環境最終還要轉為css才能實現網頁的佈局；使用less直接創建Less文件就可以了嗎？不，我們通常使用Koala進行less或scss到css的轉換；
將less或scss的文件夾拖進koala的主頁中，就可以隨心所欲的編譯了！！
對於一些簡單的 項目，使用不使用scss和less並無區別，可在一些難度較大、比較複雜的項目上，less或scss就很有必要了。既節省我們的時間，有提高效率，一舉多得！！！
文章來自博客園
找工作難？那是你沒選對行業!
2017年【中公教育】特別推出2017年就業促進計劃，500萬就業基金助你成為IT達人
詳情請戳：//www.ujiuye.com/zt/jycj/?wt.bd=zy35844tt
什麼？海量IT學習資料白給你都不要？別想了，加群搶：499754614