Sass

Как настроить

Чтобы включить UIkit в рабочий процесс сборки вашего проекта, вам необходимо импортировать три файла SCSS из UIkit в правильном порядке в свой собственный код SCSS. Затем скомпилируйте ваш файл, например, запустив 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";

Создать тему UIkit

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

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

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

Сначала найдите в исходнике UIkit SCSS-переменную, которую нужно изменить. Например, глобальный цвет ссылок определен в файле /src/scss/components/variables.scss:

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

Затем перезапишите значение по умолчанию, установив собственное значение внутри вашего собственного файла, то есть в site.scss (как описано выше):

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

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

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

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

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

// Правило SCSS
.uk-card {
    position: relative;
    box-sizing: border-box;

    // миксин, позволяющий добавить новое объявление
    @include hook-card();
}

Затем внедрите дополнительный CSS с помощью хука в свой собственный SCSS-файл, то есть в site.scss, как описано выше:

// миксин для добавления нового объявления
@mixin hook-card() { color: #000; }

Инверсные хуки

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

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

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

Прочие пользовательские хуки

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

// misc mixin
@mixin hook-card-misc() {

    // new rule
    .uk-card a { color: #f00; }
}

Отключить компонент "inverse"

Компонент «Инверсия» включает дополнительные стили для реализации инверсного поведения. Если ваш проект не использует эти стили, вы можете исключить их при компиляции Sass. Это позволяет уменьшить размер файла скомпилированного CSS. Для этого найдите переменные Sass, содержащие color-mode (например $inverse-global-color-mode), и присвойте им значение none.

Чтобы полностью отключить инверсные стили, установите:

$inverse-global-color-mode: none;

Вы также можете отключить инверсный режим для отдельных компонентов.

Как структурировать свою тему

В примерах выше мы добавили все пользовательские правила непосредственно в файл site.scss. Если вы изменили несколько переменных, но остальное вас устраивает, это вполне нормально. Однако при больших изменениях мы рекомендуем использовать этот файл только как точку входа для компилятора Sass. Лучше отсортировать все правила в один файл для каждого компонента в отдельной папке. Такую же структуру можно найти в теме по умолчанию /src/scss/theme.

<!-- исходники uikit, могут находиться в подпапке -->
uikit/src/scss/

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

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

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

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

    <!-- создайте 2 файла для каждого компонента, который настраиваете -->
    accordion.scss <!-- overwrite variables in here -->
    accordion-mixins.scss <!-- use hooks in here -->

    alert.scss
    alert-mixins.scss

    align.scss
    align-mixins.scss

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

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

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

// site.scss

// 1. Ваши пользовательские переменные и перезапись переменных.
@import "theme/accordion.scss";
@import "theme/alert.scss";
@import "theme/align.scss";
// ... import all

// 2. Импорт переменных по умолчанию и доступные миксины.
@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";
// ... import all

// 4. Импорт UIkit
@import "uikit/src/scss/uikit.scss";

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