SCSS擴展嵌套的選擇和覆蓋嵌套規則集

好了，所以我有一個嵌套選擇一個佔位符：SCSS擴展嵌套的選擇和覆蓋嵌套規則集

%block { 
    .title { 
    font-size:12px; 
    } 
}

我想擴展它，並添加到.title類：

.superblock { 
    @extend %block; 
    .title { 
    font-weight:bold; 
    } 
}

我想要的答案是這樣的：

.superblock .title { 
    font-size: 12px; 
    font-weight: bold; }

但是，我得到的答案是這樣的：

.superblock .title { 
    font-size: 12px; } 

.superblock .title { 
    font-weight: bold; }

我做錯了什麼或者它是如何工作？澄清我想合併它。如果我直接在.superblock內添加一些東西，並添加另一個.superblock2，它也擴展了％塊，它們合併時沒有任何問題。

來源

2013-04-18 Todilo

這似乎只是它的工作方式..看看嵌套參考.. http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE。html＃nested_rules –

Sass沒有「合併」重複選擇器的功能。在編譯完CSS之後，您需要找到另一個實用程序來執行此操作。

@extend指令不僅僅是一種使用類代替mixin的方式（類似於LESS風格的mixin調用）。

.block { 
    font-size:12px; 
} 

.foo { 
    @extend .block; 
    font-weight: bold; 
}

輸出：爲什麼@extend作品，當你延長正常上課，而不是繼承類它的方式變得清晰

.block, .foo { 
    font-size: 12px; 
} 

.foo { 
    font-weight: bold; 
}

使用的擴展類只是抑制原始類名的排放。

現在你已經看到了爲什麼@extend按照它的方式工作，你仍然想要@extend提供什麼？如果答案是否定的，那麼你需要使用一個mixin：

@mixin block { 
    // styles 
    .title { 
     font-size: 12px; 
     @content; 
    } 
} 

.superblock { 
    @include block { 
     font-weight: bold; 
    } 
}

輸出：

.superblock .title { 
    font-size: 12px; 
    font-weight: bold; 
}

來源

2013-04-18 15:15:57 cimmanon

謝謝你。這對我們的項目來說是一個成功的決定因素。你知道另一個css預處理器或者一個合併後的scss實用工具嗎？ – nknj

這是相當多了。 SASS分別生成擴展聲明。

它沒有按選擇器分組聲明的功能，它不是那麼聰明。

但是您不必擔心CSS的清潔問題。現代Web服務器提供CSS壓縮，所有重複將被很好地壓縮。

來源

2013-04-18 15:19:47

沒錯，這只是我不安的自動化表演enhancher。謝謝 – Todilo

-2

您可以使用一個工具，我用它來清潔的CSS https://github.com/addyosmani/grunt-uncss

「從與UnCSS您的項目刪除未使用的CSS咕嚕的任務。」

來源

2015-09-07 16:42:40 XAVIER

OP沒有詢問如何刪除未使用的規則，而是詢問如何覆蓋SCSS @extend（）中包含的規則。 – Civilian

LESS可以做到這一點。但是你會寫：

.superblock { 
    .title { 
    .block .title; 
    } 
}

不知道它是否也適用於@extend。

來源

2017-04-26 14:08:43 brannigan

SCSS擴展嵌套的選擇和覆蓋嵌套規則集

回答

相關問題