SCSS: using @if to include only certain selectors on compilation

Question

I use three different stylesheets which share about 70 per cent of their content for different parts of site. The remaining 30 per cent varies, and my current practice is to maintain three SCSS files (one for each), with separate @import statements calling (1) partial SCSS files containing the shared selectors on the one hand, and (2) specific partial SCSS files with the specific selectors:

/* ===== 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";

The reason I'm doing this is because of the three stylesheets, one (stylesheet A)—used on the home page, is by far the shortest; the second (stylesheet B), used for 90 of the rest of the site, is of average length; and the last (stylesheet C), used on just one page, is extremely long. It makes sense to lighten the burden on the home page on the one hand, and to contain the very convoluted selectors required for the last page to stylesheet C.

While this setup makes maintenance bearable, it still means I have to maintain three separate setups. It occurs to me I could reduce the main file to just one, setting a variable at the beginning such as $stylesheet-type, which could be changed, just before compilation, to type1, type2 or type3, as required.

I'm trying to find a way of achieving this by applying @if conditions to the selectors that aren't common to all three stylesheets. The difficulty is that import directives may not be used within control directives or mixins. It seems the @if keyword can decide whether or not to execute the content of declaration clocks contained within a selector.

This would definitely achieve an empty sidebar-treat selector in stylesheets B and C:

$stylesheet-type: "typeA";
// $stylesheet-type: "typeB";
// $stylesheet-type: "typeC";

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

    }
}

This would actually be even better, and SCSS does compile it:

 $stylesheet-type: "typeA";
 // $stylesheet-type: "typeB";
 // $stylesheet-type: "typeC";

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

I would rather not have to go through the extra step of addiding the @if keyword manually to each selector (although it is admittedly a one-off process) as this can be error-prone and involves an extra step in a process that is likely to occur often with tight time frames: ideally, I'd like to get the unwanted selector not to appear at all in the compiled stylesheets B and C, via an @import that could be made conditional. Is there any way of achieving this?.

Answer 1

I solved this by wrapping unwanted content in the different components of the stylesheet, before compilation, as follows:

// $stylesheet-type: "basic";

$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

This means an enormous gain in time when applying any layout changes to the site.