enb-stylus
Пакет предоставляет ENB-технологию для сборки CSS- и Stylus-файлов в проектах, построенных по методологии БЭМ.
Принципы работы технологии и ее API описаны в документе API технологии.
Совместимость: технология пакета enb-stylus
поддерживает версию CSS-препроцессора Stylus 0.54.2
.
Обзор документа
stylus
Работа технологии В БЭМ-методологии стили к каждому блоку хранятся в отдельных файлах в директориях блоков.
ENB-технология stylus
позволяет писать код как в синтаксисе Stylus, так и на чистом CSS. Для компиляции Stylus-кода в CSS используется CSS-препроцессор Stylus.
В результате сборки вы получите CSS-файл. Для обработки итогового CSS используется CSS-построцессор postcss.
Как начать использовать?
1. Установите пакет enb-stylus
:
$ npm install --save-dev enb-stylus
Требования: зависимость от пакета enb
версии 0.16.0
или выше.
2. Опишите код стилей в файле с расширением .styl
:
blocks/
└── block/
└── block.styl
3. Добавьте в конфигурационный файл .enb/make.js
следующий код:
var stylusTech = FileProvideTech = bemTechs = ; module { config;};
Особенности работы пакета
Совместное использование Stylus и CSS
В проекте допускается совместное использование .css
- и .styl
-файлов. Однако в рамках одного блока обе технологии не могут использоваться одновременно. Если стили блока реализованы и в CSS, и в Stylus, будет использоваться файл с расширением .styl
.
Пример 1. Если файл одного блока реализован в CSS-технологии, а файл другого — в Stylus:
blocks/
└── block1/
└── block1.styl
└── block2/
└── block2.css
bundle
└── bundle.css
В сборку попадут оба файла:
;;
Пример 2. Если у одного блока есть несколько реалиализаций: файл c расширением .styl
и файл c расширением .css
:
blocks/
└── block/
├── block.styl
└── block.css
bundle
└── bundle.css
В сборку попадет только Stylus-файл:
;
Пример 3. Если у одного блока есть несколько реалиализаций, но на разных уровнях переопределения:
common.blocks/
└── block/
└── block.styl
desktop.blocks/
└── block/
└── block.css
bundle
└── bundle.css
В сборку попадут оба файла:
;;
Добавление вендорных префиксов
Технология stylus
поддерживает Autoprefixer.
Для автоматического добавления вендорных префиксов в процессе сборки используйте опцию autoprefixer.
Минимизация CSS-кода
Для минимизации CSS-кода используется csswring.
Включить минимизацию можно с помощью опции compress.
Сборка отдельного бандла для IE
Если в проекте есть стили, которые должны примениться только для IE, то их помещают в отдельный файл со специальным расширением .ie*.styl
:
.ie.styl
— стили для любого IE, ниже 9й версии..ie6.styl
— стили для IE 6..ie7.styl
— стили для IE 7..ie8.styl
— стили для IE 8..ie9.styl
— стили для IE 9.
Чтобы собрать отдельный бандл для IE нужно:
1. В папке блока создать один или несколько файлов c расширением .ie*.styl
:
blocks/
└── block/
├── block.styl
├── block.ie.styl
└── block.ie6.styl
2. Добавить еще технологию StylusTech
:
node;
3. Добавить новую цель сборки для IE файла — ?.ie6.css
:
node; node;
4. В БЭМ проектах принято подключать стили с помощью условных комментариев.
Пример
<!--[if gt IE 9]><!--> <!--<![endif]--> <!--[if lte IE 9]> <link rel="stylesheet" href="index.ie.css"/> <![endif]-->
Важно, чтобы файл, подключаемый для IE, содержал стили не только специфичные для него, но и общие для всей страницы.
Чтобы собрать такой файл, нужно расширить список суффиксов с помощью опции sourceSuffixed.
node;node;
В итоге получаем следующий конфигурационный файл .enb/make.js
:
var stylusTech = FileProvideTech = bemTechs = ; module { config;};
Лицензия
© 2014 YANDEX LLC. Код лицензирован Mozilla Public License 2.0.