溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用Less與Sass框架，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
一、Less語法
1.變量聲明：
@變量名:變量值;
1 @newHeight:20px;
2.調用變量：
1 .box {2 width: @newHeight;3 height: @newHeight;
4 }3.多重繼承（Mixins）：調用已有的類作為自己成員
1 .box1 {2 .box;3 }4.帶參數函數：
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 /*以下兩種格式的代碼實現的是同一種效果*/ 2 a { 3 &:hover { 4 color: red; 5 } 6 } 7 8 a:hover { 9 color: red;10 }二、Sass/Scss語法
Sass省去了CSS中的作為表示作用域的花括號{}和語句末尾的分號; ，改用縮進和換行；以“.sass”結尾的文件；
Scss也是Sass的一種形式，它的語法中使用{}和;，變量使用$聲明；通常一般用Scss，以“.scss”結尾的文件。
1.變量聲明和調用：
1 /*聲明*/2 $newWeight: 30px;3 /*調用*/4 .box {5 width: $newWeight;6 }2.屬性嵌套：
1 /*將box1的border設置為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 /*聲明不帶參數的混合宏*/ 2 @mixin newName { 3 width: 50px; 4 } 5 /*調用不帶參數的混合宏*/ 6 .box { 7 @include newName; 8 } 9 /*聲明帶參數的混合宏*/10 @mixin newName($newColor) {11 background-color: $newColor;12 }13 /*調用帶參數的混合宏*/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 }用占位符聲明的類，若一直沒有調用，則不會在編譯后的“.css”文件中存在占位符的類。
關于如何使用Less與Sass框架就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
