css擴充套件技術是對css原生**一種擴充套件，其中less和sass就是css擴充套件技術兩種方式，通過擴充套件技術，可以使我們在寫css**時候，更加的方便和快捷。
首先要了解css擴充套件技術的含義；擴充套件技術並不是另外一種全新的技術，它是建立在css基礎上進行擴充套件，實現一些css原生**所不能實現的功能，其次less和sass不能單獨在瀏覽器上執行，需要進行編譯；
less能實現同js一樣的變數、函式、混合引數等功能，通常用@標誌開始，後面接變數名字，具體如例項：@winth、@color、@height等等，這就是代表乙個變數；然後在css進行編譯時候實現 div}；在css裡就會顯示出在css裡顯示會出div{}；div p{}；div p .cls{}；在顯示偽類時候less用&符號表示，例如：&：hover；&表示當前父元素；
sass是我們比較常用乙個擴充套件技術，首先他在webstorm上無法直接編譯，需要一款第三方軟體進行編譯我們一般常用的環境需求是基於rubg；
sass字尾名版本：「sass」「scss」；區別是sass語法沒有大括號，而scss有大括號；sass與less不同點還有使用sass需要先進行宣告：@mini，然後接收時候需要有接收命令：@import； 變數宣告：$+變數； 預設變數：需要在後面加上！default即可；
變數在less 和 sass的全部變數和區域性變數不同
1. less當中變數是按需載入，需要時候全域性搜尋；
2. sass變數是從上到下載入；
3. 預設值在封裝**時候很有用；
特殊變數 #{} - 對裡面東西進行轉義
1. $border:top;
2. .border-#
less和sass最重要一點就是可以巢狀
1. 裡面元素加冒號表示是元素乙個屬性， 不加冒號表示乙個子元素
2. @at-root 跳出父元素
sass同less一樣有css原生**所不具有的特殊功能和用途，他也可以有繼承、佔位選擇器%、函式 、運算、 判斷、 三目運算子、for迴圈等等功能
總之，通過css擴充套件技術我們可以更快更高效完成css**的工作，讓我們的工作更加的簡單和重複利用；
less和sass的使用區別
首先我們來說一下less。less中的變數 1.宣告變數使用 變數名 變數值 2.使用變數 變數名 less中的變數型別 數字類 1 10px 字串 無引號字串 red 和有引號字串 gdak 顏色類 red 000000 rgb 值列表型別，用逗號或空格分隔 變數使用原則 多次頻繁出現的值 需要修...
Less和Sass相同與不同
一 less與sass分別是什麼 1 less less 是一門 css 預處理語言，它擴充套件了 css 語言，增加了變數 mixin 函式等特性，使 css 更易維護和擴充套件，它可以執行在 node 或瀏覽器端。2 sass sass 是一款強化 css 的輔助工具，它在 css 語法的基礎上...
強悍的 CSS 擴充套件語言 Sass
div class testborder p input p div 假設上面這 3 個 dom 元素有這樣的需求，div 去邊框，p 顯示邊框，input 只顯示底部邊框,而且統一用 important 關鍵字提高樣式的優先權 如果手寫純 css 會是這樣 testborder.testborde...