Разделение файлов в SASS

В этой статье мы увидим, как разбить файл SASS на частичные файлы, а также узнаем его реализацию на примерах.

Syntactically Awesome Style Sheet (SASS) — это препроцессор CSS, полностью совместимый со всеми версиями CSS. Это язык сценариев (например, JS), который компилируется в CSS в браузере. Он предоставляет дополнительные преимущества по сравнению с обычным стилем CSS, улучшая способ написания стилей CSS.

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

• @импорт и частичные
• @use и частичные

Мы изучим оба подхода и поймем их через реализации.

@import и partials: в этом случае мы создадим файлы с частичными фрагментами кода и один общий файл, содержащий @import для импорта всех остальных файлов. Директива @import позволяет включать содержимое одного файла в другой. Partials — это файлы Sass с частичным кодом, которые поддерживают модульность.

Пример 1. В этом примере у нас есть два файла index.scss и color.scss , где файл color.scss содержит некоторый код, прикрепленный к файл index.scss с директивой @import. При этом мы разбиваем код на два файла и окрашиваем браузер в синий цвет. Ниже мы создали 2 файла SASS, т. е . color.scss и index.scss :

• цвет.scss:

html,
body {
    background:blue;
}

• индекс.scss:

@import "color.scss";
body {
    font-family:sans-serif;
    font-size: 10px;
    color: white;
}

Теперь выполните приведенную ниже команду в той же папке, где хранятся два вышеуказанных файла (убедитесь, что sass уже установлен):

sass --watch index.scss output.css

Эта команда сгенерирует следующий файл CSS:

• вывод.css:

html,
body {
    background: blue;
}

body {
    font-family: sans-serif;
    font-size: 10px;
    color: white;
}

Теперь включите сгенерированный выше CSS в шаблон HTML.

• индекс.html:

Выход:

@use и partials: в этом случае мы создадим частичные файлы с символом подчеркивания ( _ ) в качестве префикса и один общий файл, содержащий @use для импорта всех остальных файлов. @use похож на @import , но также позволяет вызывать примеси и функции из других файлов. Нам нужно использовать частичные файлы без подчеркивания.

Пример 2: В этом примере у нас есть 2 файла index.scss и _partial.scss , где файл _partial.scss содержит функцию add_green , которая вызывается в файле index.scss с помощью @use. Это помогает нам создать модульную программу (разделение файлов), которая окрашивает текст в зеленый цвет. Здесь мы создали 2 файла SASS, т. е. _partial.scss и index.scss, как показано ниже:

• _partial.scss:

@function add_green() {
   $returnValue : green;
   @return $returnValue;
}

• индекс.scss:

@use "partial";

body {
   font-family: sans-serif;
   font-size: 10px;
   color: partial.add_green();
}

Теперь выполните приведенную ниже команду в той же папке, где хранятся файлы (убедитесь, что sass уже установлен):

sass --watch scss/index.scss style/output.css

Эта команда сгенерирует следующий файл CSS:

• вывод.css:

body {
    font-family: sans-serif;
    font-size: 10px;
    color: green;
}

Теперь включите сгенерированный выше CSS в шаблон HTML.

• индекс.html:

Выход: