# CSS

В качестве css-препроцессора можно использовать:
* [scss](http://sass-lang.com) также поддерживается .sass;
* [less](http://www.lesscss.ru);
* [stylus](http://learnboost.github.io/stylus).

Css-препроцессор выбирается в [tars-config.js](options.md#csspreprocessor).

В целом, нет каких-либо неожиданностей при использовании css-препроцессора. Используем все возможности, которые предоставляет выбранный инструмент.

Если вы привыкли к обычному css, вы можете использовать css-синтаксис в любом препроцессоре.

Все файлы с префиксом _ не будут компилироваться сборщиком. Эти файлы нужно использовать для импортов. На самом деле вы можете импортировать любые файлы, но если вы импортируете файл, который итак попалет в бандл, у вас будет две копии одного и того же файла. Поэтому файлы с префиксом _ не компилируются. Импортировать можно как файлы препроцессора, так и обычные css-файлы.
Пример импорта на scss(sass):

```scss
// файлы лежат в одной директории
@import '_partial.scss';

// _partial.sass лежит в соседней директории partials
@import '../partials/_partial.sass';
```

Если требуется подключить файлы из директории static (картинки), то необходимо пользоваться плейсхолдером %=staticPrefixForCss=% (значение плейсхолдера настраивается в [tars-config.js](options.md#staticprefixforcss)). Тогда подключение картинки в качестве background (картинка будет взята из вашего модуля main) будет выглядеть следующим образом (в примере используется scss):

```scss
.main {
    background: url('%=staticPrefixForCss=%assets/main/bg.png') repeat;
}
```

Есть пара моментов по организации scss|less|styl-файлов (далее считаем, что был выбран scss в качестве css-препроцессора):

* Каждый модуль имеет свое css-представление.
* Общие стили для проекта рекомендуется складывать в common.scss в static/scss
* Подключение шрифтов в fonts.scss
* Миксины в mixins.scss
* Описание стилей UI-элементов в GUI.scss
* Переменные в vars.scss
* Стили библиотек в static/scss/libraries (может содержать подпапки)
* Стили для плагинов в static/scss/plugins (может содержать подпапки)
* Стили, которые не ясно, куда определить, помещаем в static/scss/etc/etc.scss
* В основной папке с css (в данном случае это папка scss) нельзя создавать новые файлы (кроме тех случаев, когда вы сами правите таски, связанные с работой с css). Новые файлы можно создавать только в static/scss/plugins и libraries.

Склейка стилей происходит в следующем порядке:
* Normalize
* Стили для библиотек
* Mixins, sprites
* Fonts
* Vars
* GUI
* Common stylies (common.scss)
* Стили для плагинов (static/scss/plugins, включая все поддиректории)
* Стили модулей
* Стили из etc.scss

Для браузеров ie8 и ie9 можно размещать отдельные фиксы в папке ie в папке модуля. Нужно создать ie8.scss или ie9.scss, в соответствии с тем, в какой браузер вносится фикс.