css擴(kuò)展技術(shù)是對(duì)css原生代碼一種擴(kuò)展，其中l(wèi)ess和sass就是css擴(kuò)展技術(shù)兩種方式，通過(guò)擴(kuò)展技術(shù)，可以使我們?cè)趯?xiě)css代碼時(shí)候，更加的方便和快捷。

　　首先要了解css擴(kuò)展技術(shù)的含義；擴(kuò)展技術(shù)并不是另外一種全新的技術(shù)，它是建立在css基礎(chǔ)上進(jìn)行擴(kuò)展，實(shí)現(xiàn)一些css原生代碼所不能實(shí)現(xiàn)的功能，其次less和sass不能單獨(dú)在瀏覽器上運(yùn)行，需要進(jìn)行編譯；

　　less能實(shí)現(xiàn)同js一樣的變量、函數(shù)、混合參數(shù)等功能，通常用@標(biāo)志開(kāi)始，后面接變量名字，具體如實(shí)例：@winth、@color、@height等等，這就是代表一個(gè)變量；然后在css進(jìn)行編譯時(shí)候?qū)崿F(xiàn)?div{color：red，p{font-size：10px .cls{width：@width；height：@height}}；在css里就會(huì)顯示出在css里顯示會(huì)出div{}；div p{}；div p .cls{}；在顯示偽類時(shí)候less用&符號(hào)表示，例如：&：hover；&表示當(dāng)前父元素；

　　sass是我們比較常用一個(gè)擴(kuò)展技術(shù)，首先他在webstorm上無(wú)法直接編譯，需要一款第三方軟件進(jìn)行編譯我們一般常用的環(huán)境需求是基于Rubg；

　 ?sass后綴名版本：“sass”“scss”；區(qū)別是sass語(yǔ)法沒(méi)有大括號(hào)，而scss有大括號(hào)；sass與less不同點(diǎn)還有使用sass需要先進(jìn)行聲明：@mini，然后接收時(shí)候需要有接收命令：@import；?變量聲明：$+變量；?默認(rèn)變量：需要在后面加上！default即可；

?　?變量在less 和 sass的全部變量和局部變量不同
????1.??less當(dāng)中變量是按需加載，需要時(shí)候全局搜索；
????2.??sass變量是從上到下加載；
　?3.?默認(rèn)值在封裝代碼時(shí)候很有用；
? ? 特殊變量 #{} - 對(duì)里面東西進(jìn)行轉(zhuǎn)義
????1.?$border:top;
????2.?.border-#{$border}{color:$color}

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

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

　　總之，通過(guò)css擴(kuò)展技術(shù)我們可以更快更高效完成css代碼的工作，讓我們的工作更加的簡(jiǎn)單和重復(fù)利用；

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/gong-ping/p/4676673.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。