SCSS: использование @if для включения только определенных селекторов при компиляции

Question

Я использую три разных таблицы стилей, которые содержат около 70 процентов их содержимого для разных частей сайта. Остальные 30 процентов меняются, и моя текущая практика заключается в том, чтобы поддерживать три файла SCSS (по одному для каждого), с отдельными операторами @import, вызывающими (1) частичные файлы SCSS, содержащие разделяемые селекторы, с одной стороны, и (2) конкретные частичные SCSS файлы с конкретными селекторами:

/* ===== 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 ключевое слово может решить, следует ли выполнять содержание часов декларации, содержащихся в в пределах селектор.

Это, безусловно, достижение пустой sidebar-treat селектор в таблицы стилей B и C:

$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 вручную для каждого селектора (хотя это, по общему признанию, одноразовый процесс), поскольку это может быть подвержено ошибкам и включает в себя ex шаг в процессе, который может произойти часто с плотными временными рамками: в идеале я хотел бы, чтобы нежелательный селектор вообще не отображался в скомпилированных таблицах стилей B и C через @import, который можно было бы сделать условна. Есть ли способ достичь этого ?.

Answer 1

Я решил эту проблему путем оборачивания нежелательного контента в различных компонентах таблицы стилей, перед компиляцией, следующим образом:

// $ таблицы стилей типа: «базовый»;

$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 

Это означает огромный выигрыш во времени при применении любых изменений макета на сайт.