SASS

Как переопределять стили UIkit и создавать собственные темы с помощью Sass.

После установки UIkit в вашем распоряжении будут все исходники. Вы можете компилировать их и создавать собственные темы, а затем включать их в сборки Документация по Sass на русском.

Внимание Sass допускает использование двух разных версий синтаксиса: Sass и SCSS. UIkit использует синтаксис SCSS.

Как настраивать Sass

Чтобы включить UIkit в сборку вашего проекта, необходимо импортировать три файла SCSS из UIkit в правильном порядке. Затем переходите к компиляции sass site.scss > site.css Подробнее о компиляции Sass смотрите тут. Не забывайте о правильном порядке файлов, иначе работать не будет.

// 1. Ваши собственные переменные и переопределения.
$global-link-color: #DA7D02;

// 2. Импортируйте стандартные переменные фреймворка и примеси.
@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

// 3. Ваши хуки.
@mixin hook-card() { color: #000; }

// 4. Импорт фреймворка UIkit.
@import "uikit/src/scss/uikit-theme.scss";

Внимание В примере используется стиль базовой темы по умолчанию. Вы можете импортировать только variables.scss, mixins.scss и uikit.scss для использования только основных стилей.

Создание темы UIkit

После создания и настройки файла для пользовательского кода SCSS, вы можете приступить к созданию собственной темы UIkit. Если вы ранее не работали с SCSS, ознакомьтесь с функциями языка. При работе с исходниками SCSS фреймворка UIkit мы даем несколько полезных рекомендаций.

Использование переменных

Можно быстро кастомизировать стили путем переопределения значений уже объявленных переменных. Глобальные переменные, а также переменные компонентов вы найдете в файле variables.scss. Переопределять переменные следует в вашей теме.

Найдите интересующую переменную SCSS в исходнике UIkit. Например, цвет ссылки определяется в /src/scss/components/variables.scss:

// Значение по умолчанию
$global-link-color: #4091D2;

Переопределите значение по умолчанию, установив пользовательский код в вашем файле site.scss, как описано в инструкции выше:

// Новое значение
$global-link-color: #DA7D02;

Скомпилированный CSS будет содержать значение, которое вы задали в своей теме. Поскольку многие компоненты используют переменные уровня @global-*, новое значение появится во всех местах, где используется переменная. Поэтому вы можете быстро создать свою тему, просто изменив несколько глобальных переменных.

Использование хуков

Чтобы избежать оверхеда, мы используем примеси(миксины) из Sass, которые подключаем к предопределенным селекторам из исходников UIkit и применяем дополнительные свойства. Селекторы не должны дублироваться во всех файлах. К тому же, глобальные изменения можно сделать проще.

Сначала найдите правило, которое вы хотите дополнить, например, просмотрев файл SCSS компонента Card /src/scss/components/card.scss:

// Стандартное правило
.uk-card {
    position: relative;
    box-sizing: border-box;

     // разрешаем добавление новых свойств
    @include hook-card();
}

Теперь перейдите в свою тему и добавьте в файл site.scss новые стили:

// Добавляем новые правила
@mixin hook-card() { color: #000; }

Инверсия

Компонент Inverse позволяют настроить стиль компонента при использовании в сочетании с модификаторами .uk-light или .uk-dark подробнее в разделе Inverse. Обработка хуков в Sass отличается от Less. В версии Sass каждый компонент имеет свои собственные стили инверсии. Вы можете увидеть все доступные варианты в файле src/scss/mixins.scss.

Например, вы можете сделать так, чтобы кнопка по умолчанию отображалась с пользовательским фоном всякий раз, когда она используется в качестве кнопки отправки в форме обратной версии.

@mixin hook-inverse-button-default(){
    background: lime;
}

Пользовательские хуки и расширения

Если в наличии не имеется подходящего хука или переменной, вы также можете создать свой собственный селектор. Используйте конструкцию hook-card-misc() mixin компонента Card и напишите свой селектор внутри. Это позволит корректно отсортировать ваш новый селектор и отображать его в нужном месте скомпилированного файла CSS. Просто добавьте следующие строки в ваш файл SCSS site.scss:

// Хук определения 
@mixin hook-card-misc() {

    // Ваше новое правило
    .uk-card a { color: #f00; }
}

Отключение компонента Inverse

Компонент Inverse включает механизм инверсии для различных компонентов. Если вы не планируете использовать его в своем проекте, имеется возможность исключить их из проекта. В этом случае вы уменьшите размер скомпилированного CSS. Для отключение компонента найдите переменные в Sass, содержащие color-mode, например, мы нашли $inverse-global-color-mode и добавили ему атрибут none. Все, мы исключили компонент из проекта.

$inverse-global-color-mode: none;

Также можно выборочно отключить инверсию для отдельных компонентов:

// Card
$card-primary-color-mode: none;
$card-secondary-color-mode: none;

// Navbar
$navbar-color-mode: none;

// Off-canvas
$offcanvas-bar-color-mode: none;

// Overlay
$overlay-primary-color-mode: none;

// Section
$section-primary-color-mode: none;
$section-secondary-color-mode: none;

// Tile
$tile-primary-color-mode: none;
$tile-secondary-color-mode: none;

Правильная структура файлов проекта

В приведенных выше примерах мы добавляли все пользовательские правила непосредственно в файл site.scss. Такой подход имеет место быть, но лишь в случае небольших изменений. Если ваш проект крупнее, стоит заранее задуматься о корректной структуре. Используйте site.scss в качестве точки входа (entry) для компилятора Sass. Рекомендуется разбивать код на части и помещать в отдельные файлы для каждого компонента. В качестве примера вы можете использовать структуру UIkit /src/scss/theme или использовать собственную.

<!-- исходники uikit , миксины, дочерние директории. Настроено для NPM -->
uikit/src/scss/

    components/
        _import.scss
        accordion.scss
        alert.scss
        ...

    theme/
        _import.scss
        accordion.scss
        alert.scss
        ...

    <!-- Любые другие файлы uikit, некоторые из них будут импортированы ниже -->
    ...

<!-- Здесь размещайте все ваши наработки, разделенные на компоненты -->
theme/

    <!-- Создайте 2 файла для каждого компонента, который вы настраиваете -->
    accordion.scss <!-- Здесь переопределяйте переменные -->
    accordion-mixins.scss <!-- Хуки используйте здесь -->

    alert.scss
    alert-mixins.scss

    align.scss
    align-mixins.scss

    <!-- и т. д. для всех ваших компонентов -->
    ...

<!-- Это ваша точка входа для компиляции scss -->
site.scss

Точка входа для компилятора Sass site.scss. Компилируйте исходные файлы в следующем порядке:

// site.scss

// 1. Ваши переменные и переопределения переменных UIkit.
@import "theme/accordion.scss";
@import "theme/alert.scss";
@import "theme/align.scss";
// ... Импорт всего этого

// 2. Импорт стандартных переменных и примесей UIkit.
@import "uikit/src/scss/variables.scss";
@import "uikit/src/scss/mixins.scss";

// 3. Ваш код, переопределяющий компоненты.
@import "theme/accordion-mixins.scss";
@import "theme/alert-mixins.scss";
@import "theme/align-mixins.scss";
// ... импорт всего этого

// 4. Импорт фреймворка UIkit
@import "uikit/src/scss/uikit.scss";

Готово. Теперь вы можете компилировать site.scss и полученный CSS будет содержать все ваши дополнения.

Внимание Вы можете дополнить эти настройки, заменив часть «4». Затем вы можете исключить ненужные компоненты, которые использовать не планируете. Просто скопируйте из src/scss/components/_import.scss все необходимое и убедитесь, что сохранили правильный порядок импорта.