課程
/前端開發
/Sass/Less
/Sass進階篇
何種情況下使用呢？請教
2015-09-20
源自：Sass進階篇 5-4
正在回答
我的理解就是為了減少權重，既然這樣干嘛還要寫嵌套呢？
sass語法：
.block {
? ? color: red;
? ? #{&}__element {
? ? ? ? color:blue;
? ? }
? ? #{&}--modifier {
? ? ? ? color: orange;
}
css結果：
? color: red;
.block .block__element {
? color: blue;
.block .block--modifier {
? color: orange;
這里我們實現的是BEM約定的css命名規則，不希望嵌套的發生，則可以使用@at-root,它在sass>3.3版本以上才有這個功能，改寫如下：
? ? @at-root #{&}__element {
? ? ? ? color: blue;
? ? @at-root #{&}--modifier {
? ? ? ? color:orange;
.block__element {
.block--modifier {
詳細了解看如下網址：
sass @at-root?
http://www.w3cplus.com/preprocessor/Sass-3-3-new-feature-at-root-bem.html
BEM css命名規則：
https://en.bem.info/method/naming-convention/
慕粉1137201464
這是sass3.3的內容
舉報
對Sass其它較有難度的部分進行講解，包括常用控制命令、函數
2 回答關于@debug
2 回答關于 floor 負數的問題
2 回答關于mix函數的第三個參數
2 回答關于map對象用@each in遍歷的問題
2 回答sass 運算相關
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-03-29
我的理解就是為了減少權重，既然這樣干嘛還要寫嵌套呢？
2016-03-04
sass語法：
.block {
? ? color: red;
? ? #{&}__element {
? ? ? ? color:blue;
? ? }
? ? #{&}--modifier {
? ? ? ? color: orange;
? ? }
}
css結果：
.block {
? color: red;
}
.block .block__element {
? color: blue;
}
.block .block--modifier {
? color: orange;
}
這里我們實現的是BEM約定的css命名規則，不希望嵌套的發生，則可以使用@at-root,它在sass>3.3版本以上才有這個功能，改寫如下：
sass語法：
.block {
? ? color: red;
? ? @at-root #{&}__element {
? ? ? ? color: blue;
? ? }
? ? @at-root #{&}--modifier {
? ? ? ? color:orange;
? ? }
}
css結果：
.block {
? color: red;
}
.block__element {
? color: blue;
}
.block--modifier {
? color: orange;
}
詳細了解看如下網址：
sass @at-root?
http://www.w3cplus.com/preprocessor/Sass-3-3-new-feature-at-root-bem.html
BEM css命名規則：
https://en.bem.info/method/naming-convention/
2015-09-21
這是sass3.3的內容