English description | Описание на русском
В качестве CSS-препроцессора можно использовать:
CSS-препроцессор выбирается в tars-config.js.
В целом, нет каких-либо неожиданностей при использовании CSS-препроцессора. Используем все возможности, которые предоставляет выбранный инструмент.
Если вы привыкли к обычному CSS, вы можете использовать CSS-синтаксис в любом препроцессоре.
В TARS поддерживается два подхода для работы со стилями:
Все, что описано ниже справедливо для обоих подходов.
Все файлы с префиксом _ не будут компилироваться сборщиком. Эти файлы нужно использовать для импортов. На самом деле вы можете импортировать любые файлы, но если вы импортируете файл, который итак попадет в бандл, у вас будет две копии одного и того же файла. Поэтому файлы с префиксом _ не компилируются. Импортировать можно как файлы препроцессора, так и обычные CSS-файлы. Пример импорта на scss(sass):
// файлы лежат в одной директории
@import '_partial.scss';
// _partial.sass лежит в соседней директории partials
@import '../partials/_partial.sass';Если требуется подключить файлы из node_modules или bower_components, можно не писать полный путь, а использовать сокращенный синтаксис, TARS сам достроит путь:
@import 'bootstrap/dist/bootstrap.scss';В случае такого импорта TARS попытается найти bootstrap/dist/bootstrap.scss в node_modules и bower_components. Данная функциональность доступна с версии TARS 1.7.0
Если требуется подключить файлы из директории static (картинки), то необходимо пользоваться плейсхолдером %=static=% или __static__. Тогда подключение картинки в качестве background (в данном примере картинка будет взята из вашего компонента main) будет выглядеть следующим образом (в примере используется scss):
.main {
background: url('%=static=%assets/main/bg.png') repeat;
}Префикс %=staticPrefixForCss=% все еще работает, но крайне не желательно его использовать, так как в будущих версиях он будет удален! Используйте просто %=static=% или __static__! Новый вариант префиксов работает в TARS, начиная с версии 1.6.0
Есть пара моментов по организации scss|sass|less|styl-файлов (далее считаем, что был выбран scss в качестве CSS-препроцессора):
- Каждый компонент имеет свое CSS-представление.
- Общие стили для проекта рекомендуется складывать в common.scss в static/scss
- Подключение шрифтов в fonts.scss
- Миксины в mixins.scss
- Описание стилей UI-элементов в GUI.scss
- Переменные в vars.scss
- Стили библиотек в static/scss/libraries (может содержать подпапки и CSS-файлы)
- Стили для плагинов в static/scss/plugins (может содержать подпапки и CSS-файлы)
- Стили, которые не ясно, куда определить, помещаем в static/scss/etc/etc.{scss,css}
- В основной папке с CSS (в данном случае это папка scss) нельзя создавать новые файлы (кроме тех случаев, когда вы сами правите таски, связанные с работой с css). Новые файлы можно создавать только в static/scss/plugins|libraries|etc|separate-css.
Если вам необходимо подключить стили bower- или npm-пакета, то используйте import нужных стилей из пакета.
Для браузеров IE8 и IE9 можно размещать отдельные фиксы в папке ie в папке компонента. Нужно создать ie8.{scss,sass,css} или ie9.{scss,sass,css}, в соответствии с тем, в какой браузер вносится фикс.