Компилятор SCSS > CSS

Шаблоны

SCSS - это препроцессор CSS, с расширенными возможностями.
В интернете много материалов по SCSS, поэтому подробно останавливаться на этом не буду.

  • Как включить

    Админ. панель шаблона - вкладка Compiler - кнопка Compiler - Да - Сохранить

    Вы включили компилятор

    С этого момента при каждом обновлении любой страницы сайта, происходит компиляция кода scss в css.
    Файл стилей шаблона uikit.min.css будет пререзаписываться.

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

  • Куда записывать стили

    В админ.панели файлы можно посмотреть здесь: Система -> Шаблоны сайта -> Simple5u

    /media/templates/site/simple5u/scss/ ...

    compiler

    Каталог custom

    Каталог создан специально для размещения пользовательских файлов На старте вы можете размещать код в файле user.scss

    Для каждого компонента, модуля, страницы или другого произвольного объекта, вы можете создать отдельный файл my_code_1.scss

    Разместите его в каталоге custom и обязательно добавьте в файл custom/import.scss После этого код файла будет компилироваться в конечный файл uikit.min.css

    Таких файлов можно создать много, на производительность это не влияет, потому что на выходе все равно только 1 файл css. А работать с такой структурой гораздо легче, чем с одним большим файлом.

    Каталог theme

    Содержит файлы компонентов Uikit, почти все пустые.

    Файлы каталога удобно использовать для переопределения стилей компонентов, или добавления своих. Как пример файл buttons.scss, где я добавил стилевые правила для кнопок другого цвета (см. страницу Типографика на демо сайте), которых нет в компонентах uikit

    Файл variables-theme.scss

    Один из ключевых фалов шаблона.
    Содержит все переменные, которые используются при создании стилевых правил.
    Более 1300 строк!
    Здесь вы можете задать свои глобальные настройки для сайта. Например: $global-gutter: 30px !default; Изменив значение 30px, вы измените размер отступов (margin, padding) по умолчанию для всего сайта.

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

    Файлы main.scss и _blog5u.scss - "системные" файлы шаблона, желательно их не трогать.

  • Как откатить изменения

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

  • Какой синтаксис использовать

    Если вы не знакомы с SCSS, пишите на обычном CSS. Это вполне допустимо. В шаблоне используется синтаксис SCSS, не надо использовать SASS - компилятор этот диалект не поддерживает.

  • Ошибки, что делать

    Компилятор предельно требователен к синтаксису!

    Если вы:

    • забыли поставить точку с запятой в конце строки
    • забыли закрывающую фигурную скобку
    • не правильно указали ед.измерения (например. font-weight: 500px;)
    • прочие ошибки ...

    при обновлении страницы вы получаете ОШИБКУ, и что-то подобное

    compiler

    Сайт лег...

    Что делать

    • Отнестись к этому спокойно
    • Выключить компилятор. Сохранить!
    • Запомнить или скопировать ошибку (не обновляйте страницу до этого)
    • Обновить страницу. После этого все восстановитья. На самом деле лег не сайт, а компилятор)
    • Постарайтесь найти и исправить ошибку синтаксиса
  • Прочее ...

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

Simple5u. Настройка