如何有條件地加載CSS和使用SASS/SCSS

Question

TL擴展它：博士版本：是有辦法@extend一個CSS類，並沒有原班出現在我的編譯CSS 沒有改變我所有的CSS類佔％佔位符類？

基於下面的答案的簡短回答：除非您經歷並將css轉換爲無聲/佔位符類別，否則無法執行此操作。將.one {}轉換爲％one {}，甚至會導致媒體查詢出現問題。

我有一個css文件（讓我們稱之爲「style.css」），其中包含200多個CSS類來樣式各種元素，如窗體和按鈕等。我想要的是包括一些項目和其他類其他隨機項目/網站中該文件的類。對於每個新項目，我還想給我選擇的隨機語義類名稱。

我的預處理器的選擇與CSS的工作是SCSS，我真的需要一個使用SCSS的力量的答案。

下面是一個簡單的例子是什麼我談論 - 加載CSS成SCSS文件，然後延伸至與我自己的類名是CSS：

//style.css 
.one { 
    color: red; 
    padding-top: 1px; 
} 

//style2.scss 
@import "style.css"; 

.two { 
    @extend .one; 
} 

這裏的問題是，我的SCSS文件會編譯爲CSS，看起來像這樣：

//style2.css 
.one { 
    color: red; 
    padding-top: 1px; 
} 
.two { 
    color: red; 
    padding-top: 1px; 
} 

但我想要做的是隻包含第二類，這是我給了一個特別的名字。

我試着這樣做的幾種方法，但這裏不行，但沿什麼，我想我應該可以做一個行例如：

A.）首先，我搶style.css文件和chuck複製/粘貼到一個style.scss文件中。

B.）其次，我都包裹在整個事件中的佔位符/無聲類，如下所示：

//style.scss 
%placeholder { 
    .one { 
    color: red; 
    padding-top: 1px; 
    } 
} 

C.）然後我導入SCSS文件，並嘗試和擴展類我選擇的是是佔位符內，像這樣：

//style2.scss 
@import "style"; 

.two { 
    @extend .one; 
} 

當我嘗試編譯此我得到空白CSS文件（這是正確的爲試圖太棘手）。另一件我知道的是，你不能擴展嵌套選擇器，所以「@extend％placeholder.one;」也是不可能的。

我的問題是這樣的：有誰知道一種方式來導入，然後擴展一個CSS類，以便編譯結果不包括導入的CSS？

我能想到的唯一的另一個解決方案就是在我放出來之前從我的文件頂部刪除導入的css。但這實際上不是理想的解決方案。

預先感謝您的任何答案:)

Answer 1

您使用不正確的佔位符，佔位符應該僅僅是one，沒有必要把它包起來。試試這個：

// style.scss 
%one { 
    color: red; 
    padding-top: 1px; 
} 

// style2.scss 
@import "style"; 

.two { 
    @extend %one; 
} 

---

注意有使用這種方法的問題。雖然輸出的CSS比使用mixin（@include）精簡，但在任何@media查詢中都不能使用%one。 IE瀏覽器。這是行不通的：

// style2.scss 
@import "style"; 

@media screen and (max-width:1024px) { 
    .two { 
    // This won't produce CSS as it's inside the media query 
    @extend %one; 
    } 
} 

我知道要解決這個問題的唯一方法是使用一個mixin代替一個佔位符，這將導致更多的CSS（如果你使用one超過一次）。

// style.scss 
@mixin one() { 
    color: red; 
    padding-top: 1px; 
} 

// style2.scss 
@import "style"; 

@media screen and (max-width:1024px) { 
    .two { 
    @include one(); 
    } 
} 

，如果你不知道我已經詳細的my blog中混入和佔位符選擇輸出之間的差別。