這篇文章將為大家詳細(xì)講解有關(guān)如何使用Less與Sass框架，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)為客戶提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站制作、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開(kāi)發(fā). 服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站程序開(kāi)發(fā)、WEB系統(tǒng)開(kāi)發(fā)、微信二次開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)等網(wǎng)站方面業(yè)務(wù)。

                                                           一、Less語(yǔ)法

1.變量聲明：

@變量名:變量值;

1 @newHeight:20px;

　2.調(diào)用變量：

1 .box {2     width: @newHeight;3     height: @newHeight;    
4 }

3.多重繼承（Mixins）：調(diào)用已有的類作為自己成員

1 .box1 {2     .box;3 }

4.帶參數(shù)函數(shù)：

1 .newBox(@newWidth) {2     height: @newWidth;3 }4 .box2 {5     .newBox(20px);6 }

5.嵌套：（CSS中不能存在嵌套）

1 .box1 {2     height: 200px;3     width: 100px;4     .box2 {5         height: 200px;6         width: 50px;7     }8 }

 1 /*以下兩種格式的代碼實(shí)現(xiàn)的是同一種效果*/ 2 a { 3     &:hover { 4         color: red; 5     } 6 } 7  8 a:hover { 9     color: red;10 }

二、Sass/Scss語(yǔ)法

Sass省去了CSS中的作為表示作用域的花括號(hào){}和語(yǔ)句末尾的分號(hào); ，改用縮進(jìn)和換行；以“.sass”結(jié)尾的文件；

Scss也是Sass的一種形式，它的語(yǔ)法中使用{}和;，變量使用$聲明；通常一般用Scss，以“.scss”結(jié)尾的文件。

　　1.變量聲明和調(diào)用：

1 /*聲明*/2 $newWeight: 30px;3 /*調(diào)用*/4 .box {5     width: $newWeight;6 }

　　2.屬性嵌套：

 1 /*將box1的border設(shè)置為1px solid red的邊框*/ 2 .box1 { 3     wiodth: $newWeight; 4     border: { 5         top: 1px solid red; 6         right: 1px solid red; 7         bottom: 1px solid red; 8         left: 1px solid red; 9     }10 }

　　3.混合宏：

 1 /*聲明不帶參數(shù)的混合宏*/ 2 @mixin newName { 3     width: 50px; 4 } 5 /*調(diào)用不帶參數(shù)的混合宏*/ 6 .box { 7     @include newName; 8 } 9 /*聲明帶參數(shù)的混合宏*/10 @mixin newName($newColor) {11     background-color: $newColor;12 }13 /*調(diào)用帶參數(shù)的混合宏*/14 .box2 {15     @include newNmae(red);16 }

　　4.繼承：

1 .global {2                 3     outline: 1px solid red;4 }5 /*繼承使用extend*/6 input[type="text"] {7     color: yellow;8     @extend .golbal;9 }

　　5.占位符：

1 %test {2     width: 20px;3 }4 .box {5     @extend %test;6 }

用占位符聲明的類，若一直沒(méi)有調(diào)用，則不會(huì)在編譯后的“.css”文件中存在占位符的類。

關(guān)于如何使用Less與Sass框架就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享題目：如何使用Less與Sass框架
URL標(biāo)題：http://vcdvsql.cn/article26/iiijcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站設(shè)計(jì)公司、外貿(mào)建站、Google、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)