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仅包含编译中的某些选择器

回答

相关问题