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

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

1 голос
/ 05 марта 2012

Я использую три разные таблицы стилей, на которые приходится около 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 к селекторам, которые не являются общими для всех трех таблиц стилей.Сложность состоит в том, что директивы импорта не могут использоваться в директивах управления или в миксинах.Похоже, ключевое слово @if 1014 * может решить, выполнять или нет содержимое часов декларации, содержащихся в селекторе.

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

1 Ответ

1 голос
/ 05 марта 2012

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

// $ тип таблицы стилей: "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

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

...