Как остановить импорт файла более одного раза с помощью SASS и Midscape?

Я только учусь Sass и использовал @import. У меня следующая ситуация...

_master.scss <- содержит все мои глобальные переменные, такие как цвет

_child1.scss <- это для одной из моих дочерних страниц, но ей нужны вещи от мастера

_child2.scss <- это для одной из моих дочерних страниц, но она также нуждается в материале от мастера

Теперь проблема в том, что _master становится довольно большим. Поэтому, когда я сохраняю свои файлы Scss (дочерние) с помощью инструментов Mindscape в Visual Studio 2012, я замечаю, что сгенерированные файлы CSS включают ВСЕ файлы CSS из мастер-файла для обоих детей.

По сути, я получаю дубликаты CSS каждый раз, когда я хочу сослаться на главный файл с помощью @import, что не очень хорошо для производительности. Есть ли способ избежать этого?

Источник

2 ответа

Решение

Если я понимаю, похоже, что вы могли бы действительно выиграть от лучшего использования партиалов. Если вы не хотите, чтобы все _master.scss были импортированы, вы должны разбить его на компоненты и затем импортировать их по мере необходимости.

Например, если master.scss содержит все шрифты на вашем сайте, цвета и расположение столбцов, вы можете разбить его на что-то вроде следующего:

_fonts.scss
_colors.scss
_column.scss

В master.scssВы импортируете каждый. Затем вы можете импортировать эти файлы меньшего размера в child1 а также child2 как вам нужно.

Если это не то, что вы ищете, пожалуйста, попробуйте уточнить свой вопрос, и я мог бы помочь немного больше.

ОБНОВЛЕНИЕ: После обсуждения с Имджаредом он сказал, что я должен просто создать файл только с переменными. Кажется, это работает для меня, поэтому я обновляю этот ответ и отмечаю его как правильный.

Источник

Я решил этот дубликат SCSS, используя этот фрагмент для импорта контента:

// src/main/scss/import-once-workaround.scss
$imported-once-files: () !default;

@function not-imported($name) {
  $imported-once-files: $imported-once-files !global;
  $module_index: index($imported-once-files, $name);
  @if (($module_index == null) or ($module_index == false)) {
    $imported-once-files: append($imported-once-files, $name);
    @return true;
  }
  @return false;
}

Импортирование файлов выполняется затем:

@if not-imported("font") { @import "font"; }

Я использовал этот подход вместо Зурба, чтобы получить работу StyleDocco, см. Http://paul.wellnerbou.de/2015/05/18/avoid-multiple-imports-of-the-same-scss-file-with-sass/

Источник
Другие вопросы по тегам