Как можно импортировать только переменные и миксины из таблиц стилей Sass?

Я использую CSS-фреймворк Zurb Foundation 4 (S) и столкнулся с проблемой массового дублирования стилей. Это происходит потому, что в каждый файл, в который я @import 'foundation', также импортируются все стили из Foundation (правила для body, .row, .button и friends). Это приводит к длительному времени компиляции SCSS и трудностям навигации по консоли веб-разработчика в Chrome, поскольку все стили Zurb объявляются четыре или пять раз.

Чтобы смягчить это, я создал файл scss globals, который содержит переопределяемые переменные, которые использует Foundation (он вставляется в копию из foundation_and_overrides.scss, а затем импортирует глобальные переменные foundation_and_overrides). Импорт только файла globals.scss избавляет от дублирования только в файлах, в которых не используются миксины Foundation.

Это в файлах, использующих миксины Foundation: могу ли я импортировать только миксины из файла SCSS, не импортируя конкретные стили Foundation?

Ответ 1

Импорт - это все или ничего. Все, что в файле - это то, что вы получаете. Однако, если вы просматриваете источник Foundation, есть переменные, которые вы можете изменить, которые будут подавлять стили испускания (например, в buttons, установив $include-html-button-classes в false отключит стили). Этот шаблон проектирования является специфичным для Фонда, вы не можете ожидать, что другие библиотеки будут созданы таким образом.

При импорте фундамента через @import "foundation" вы импортируете этот файл: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. Как вы можете видеть, он импортирует другие файлы. Вам не нужно импортировать этот файл, если вам не все нужно: просто импортируйте требуемый файл (например, @import 'foundation/components/side-nav' только для файла боковой навигации).

Ответ 2

Посмотрите на _partial.scss в документе

https://sass-lang.com/guide

Частичные части. Вы можете создавать частичные файлы Sass, которые содержат небольшие фрагменты CSS, которые вы можете включить в другие файлы Sass. Это отличный способ модульности вашего CSS и облегчения обслуживания. Частичное - это просто файл Sass с именем, начинающимся с подчеркивания. Вы можете назвать это как _partial.scss. Подчеркивание позволяет Sass знать, что файл является только частичным файлом и что его не следует создавать в файле CSS. Частицы Sass используются с директивой @import.