SCSS：使用@if僅包含編譯中的某些選擇器

我使用三種不同的樣式表，這些樣式表共佔其內容的70％，用於網站的不同部分。其餘的30％不同，我目前的做法是維護三個SCSS文件（每個文件一個），單獨的@import語句一方面調用（1）包含共享選擇器的部分SCSS文件，另一方面（2）特定的部分SCSS文件與具體的選擇：SCSS：使用@if僅包含編譯中的某些選擇器

/* ===== Primary Styles ========================================================== 
    1. Styles used throughout the site <----------- THIS APPEARS IN ALL STYLESHEETS 
    =============================================================================== */ 

@import "partials/page"; 

/* ===== Specific Styles ===================================================================== 
    3. Styles specific to this style sheet <-------- THIS SHOULD NOT APPEAR EXCEPT IN STYLE.CSS 
    =========================================================================================== */ 

@import "partials/style-components/page_a.scss";

的原因，我這樣做是因爲這三個樣式表，一個（樣式A） - 二手主頁上，是迄今爲止最短的;第二個（樣式表B）用於網站其餘部分的90個平均長度;而最後一個（樣式表C）僅用於一頁，非常長。一方面減輕主頁上的負擔並將最後一頁所需的非常複雜的選擇器包含在樣式表C中是有意義的。

儘管此設置使維護可以承受，但它仍然意味着我必須維護三個獨立的設置。我想我可以將主文件減少到一個，在開始時設置一個變量，例如$stylesheet-type，它可以在編譯之前根據需要更改爲type1,type2或type3。

我試圖找到一種方法，通過將@if條件應用於所有三種樣式表不共同的選擇器。難點在於導入指令不能用於控制指令或混合內部。看來@if關鍵字可以決定是否在選擇器內執行包含的聲明時鐘的內容。

這肯定會實現樣式B和C的空sidebar-treat選擇：

$stylesheet-type: "typeA"; // $stylesheet-type: "typeB"; // $stylesheet-type: "typeC"; #sidebar-treat { @if $stylesheet-type == typeA { margin-border: red; } @else { } }

這實際上就更好了，和SCSS 不編譯：

$stylesheet-type: "typeA"; // $stylesheet-type: "typeB"; // $stylesheet-type: "typeC"; @if $stylesheet-type == typeA { #sidebar-treat { margin-border: red; } }

我寧願不必經過手動將@if關鍵字添加到每個選擇器的額外步驟（儘管它被公認是一次性過程），因爲這可能容易出錯並且涉及前tra步驟可能經常發生在一個緊湊的時間範圍內：理想情況下，我想通過@import在編譯後的樣式表B和C中看到不需要的選擇器不會出現在所有中有條件的。有什麼辦法可以達到這個目標？

來源

2012-03-04 Donald Jenkins

我解決了這個通過包裝樣式表的不同部件的不必要的內容，在編譯之前，如下所示：

// $樣式表型：「基本」;

$stylesheet-type: "home"; 
// $stylesheet-type: "contact"; 
// $stylesheet-type: "custom"; 

// < - - - - ONLY INCLUDED IN STYLE.CSS 

@if $stylesheet-type == basic { 


<!-- Content used only in style.css --> 
} 

// [END] < - - - - ONLY INCLUDED IN STYLE.CSS 

// < - - - - ONLY INCLUDED IN HOME.CSS 

@if $stylesheet-type == home { 


<!-- Content used only in home.css --> 

} 

// [END] < - - - - ONLY INCLUDED IN HOME.CSS 

< - - - - ONLY INCLUDED IN CONTACT.CSS 

@if $stylesheet-type == contact { 

<!-- Content used only in contact.css --> 

} 

// [END] < - - - - ONLY INCLUDED IN CONTACT.CSS

此應用任何佈局改變到網站時，是指在時間上產生巨大的增益。

來源

2012-03-05 10:55:11

SCSS：使用@if僅包含編譯中的某些選擇器

回答

相關問題