第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Sass .scss：嵌套和多個類？

Sass .scss：嵌套和多個類？

Sass .scss：嵌套和多個類？我正在使用Sass（.scss）來完成我當(dāng)前的項目。以下示例：HTML<div class="container desc">     <div class="hello">         Hello World     </div></div>SCSS.container {     background:red;     color:white;     .hello {         padding-left:50px;     }}這非常有效。我可以在使用嵌套樣式時處理多個類。在上面的示例中，我正在談?wù)撨@個：CSS.container.desc {     background:blue;}在這種情況下，所有div.container通常會red，但div.container.desc會是藍色的。我如何container用Sass將其嵌入其中？
查看完整描述

2 回答

?
Qyouu

TA貢獻1786條經(jīng)驗 獲得超11個贊

您可以使用父選擇器引用 &，它將在編譯后由父選擇器替換：

對于你的例子：

.container {
    background:red;
    &.desc{
       background:blue;
    }}/* compiles to: */.container {
    background: red;}.container.desc {
    background: blue;}

該&會徹底解決，因此，如果你的父母選擇嵌套本身，嵌套將更換前解決&。

這種表示法最常用于編寫偽元素和類：

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }}

但是，您可以放置&幾乎任何您喜歡的位置*，因此也可以使用以下內(nèi)容：

.container {
    background:red;
    #id &{
       background:blue;
    }}/* compiles to: */.container {
    background: red;}#id .container {
    background: blue;}

但請注意，這會以某種方式破壞您的嵌套結(jié)構(gòu)，從而可能會增加在樣式表中查找特定規(guī)則的工作量。

*：在前面不允許有空格以外的其他字符&。所以你不能直接連接selector+ &- #id&會拋出錯誤。


查看完整回答
反對 回復(fù) 2019-07-30
?
幕布斯6054654

TA貢獻1876條經(jīng)驗 獲得超7個贊

如果是這種情況，我認(rèn)為您需要使用更好的方法來創(chuàng)建類名或類名約定。例如，就像你說的那樣，你希望.container課程根據(jù)具體的用法或外觀有不同的顏色。你可以這樣做：

SCSS

.container {
  background: red;
  &--desc {
    background: blue;
  }
  // or you can do a more specific name
  &--blue {
    background: blue;
  }
  &--red {
    background: red;
  }}

CSS

.container {
  background: red;}.container--desc {
  background: blue;}.container--blue {
  background: blue;}.container--red {
  background: red;}

上面的代碼基于類命名約定中的BEM方法。您可以查看以下鏈接：BEM - 塊元素修改器方法


查看完整回答
反對 回復(fù) 2019-07-30
  • 2 回答
  • 0 關(guān)注
  • 4639 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號