css擴展技術是對css原生代碼一種擴展，其中less和sass就是css擴展技術兩種方式，通過擴展技術，可以使我們在寫css代碼時候，更加的方便和快捷。

　　首先要了解css擴展技術的含義；擴展技術并不是另外一種全新的技術，它是建立在css基礎上進行擴展，實現一些css原生代碼所不能實現的功能，其次less和sass不能單獨在瀏覽器上運行，需要進行編譯；

　　less能實現同js一樣的變量、函數、混合參數等功能，通常用@標志開始，后面接變量名字，具體如實例：@winth、@color、@height等等，這就是代表一個變量；然后在css進行編譯時候實現?div{color：red，p{font-size：10px .cls{width：@width；height：@height}}；在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-#{$border}{color:$color}

　　less和sass最重要一點就是可以嵌套
????1.?里面元素加冒號表示是元素一個屬性， 不加冒號表示一個子元素
????2.?@at-root 跳出父元素

　　sass同less一樣有css原生代碼所不具有的特殊功能和用途，他也可以有繼承、占位選擇器%、函數 ?、運算、?判斷、?三目運算符、for循環等等功能

　　總之，通過css擴展技術我們可以更快更高效完成css代碼的工作，讓我們的工作更加的簡單和重復利用；

　　

?

轉載于:https://www.cnblogs.com/gong-ping/p/4676673.html

總結

以上是生活随笔為你收集整理的CSS扩展“less和”sass“的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。