npm install enb-stylusenb-stylus
==========
    
Пакет предоставляет ENB-технологию для сборки CSS- и Stylus-файлов в проектах, построенных по методологии БЭМ.
Принципы работы технологии и ее API описаны в документе API технологии.
Совместимость: технология пакета enb-stylus поддерживает версию CSS-препроцессора Stylus 0.54.2.
Обзор документа
---------------
* Работа технологии stylus
* Как начать использовать?
* Особенности работы пакета
* Совместное использование Stylus и CSS
* Добавление вендорных префиксов
* Минимизация CSS-кода
* Сборка отдельного бандла для IE
Работа технологии stylus
--------------------------
В БЭМ-методологии стили к каждому блоку хранятся в отдельных файлах в директориях блоков.
ENB-технология stylus позволяет писать код как в синтаксисе Stylus, так и на чистом CSS. Для компиляции Stylus-кода в CSS используется CSS-препроцессор Stylus.
В результате сборки вы получите CSS-файл. Для обработки итогового CSS используется CSS-построцессор postcss.
Как начать использовать?
------------------------
1. Установите пакет enb-stylus:
``sh`
$ npm install --save-dev enb-stylus
Требования: зависимость от пакета enb версии 0.16.0 или выше.
2. Опишите код стилей в файле с расширением .styl:``
blocks/
└── block/
└── block.styl
3. Добавьте в конфигурационный файл .enb/make.js следующий код:
`js
var stylusTech = require('enb-stylus/techs/stylus'),
FileProvideTech = require('enb/techs/file-provider'),
bemTechs = require('enb-bem-techs');
module.exports = function(config) {
config.node('bundle', function(node) {
// Получаем список файлов (FileList)
node.addTechs([
[FileProvideTech, { target: '?.bemdecl.js' }],
[bemTechs.levels, { levels: ['blocks'] }],
bemTechs.deps,
bemTechs.files
]);
// Строим CSS-файл
node.addTech([stylusTech, {
// target: '?.css',
// filesTarget: '?.files',
// sourceSuffixes: ['.styl', '.css'],
// url: 'rebase'
// imports: 'include',
// comments: true
}]);
node.addTarget('?.css');
});
};
`
Особенности работы пакета
-------------------------
В проекте допускается совместное использование .css- и .styl-файлов. Однако в рамках одного блока обе технологии не могут использоваться одновременно. Если стили блока реализованы и в CSS, и в Stylus, будет использоваться файл с расширением .styl.
Пример 1. Если файл одного блока реализован в CSS-технологии, а файл другого — в Stylus:
``
blocks/
└── block1/
└── block1.styl
└── block2/
└── block2.css
bundle
└── bundle.css
В сборку попадут оба файла:
`css`
@import "../blocks/block1/block1.styl";
@import "../blocks/block1/block2.css";
Пример 2. Если у одного блока есть несколько реалиализаций: файл c расширением .styl и файл c расширением .css:
``
blocks/
└── block/
├── block.styl
└── block.css
bundle
└── bundle.css
В сборку попадет только Stylus-файл:
`css`
@import "../blocks/block/block.styl";
Пример 3. Если у одного блока есть несколько реалиализаций, но на разных уровнях переопределения:
``
common.blocks/
└── block/
└── block.styl
desktop.blocks/
└── block/
└── block.css
bundle
└── bundle.css
В сборку попадут оба файла:
`css`
@import "../common.blocks/block/block.styl";
@import "../desktop.blocks/block/block.css";
Технология stylus поддерживает Autoprefixer.
Для автоматического добавления вендорных префиксов в процессе сборки используйте опцию autoprefixer.
Для минимизации CSS-кода используется csswring.
Включить минимизацию можно с помощью опции compress.
Если в проекте есть стили, которые должны примениться только для 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:
`js`
node.addTechs([
[stylusTech], // для основного CSS
[stylusTech] // для IE
]);
3. Добавить новую цель сборки для IE файла — ?.ie6.css:
`js
node.addTechs([
[stylusTech],
[stylusTech, { target: '?.ie6.css' }] // IE 6
]);
node.addTargets(['?.css', '?.ie6.css']);
`
4. В БЭМ проектах принято подключать стили с помощью условных комментариев.
Пример
`html`
Важно, чтобы файл, подключаемый для IE, содержал стили не только специфичные для него, но и общие для всей страницы.
Чтобы собрать такой файл, нужно расширить список суффиксов с помощью опции sourceSuffixed.
`js`
node.addTechs([
[stylusTech],
[stylusTech, {
target: '?.ie6.css',
sourceSuffixes: [
'styl', 'css', // Общие стили
'ie.styl', 'ie.css', // Стили для IE < 9
'ie6.styl', 'ie6.css' // Стили для IE 6
]
}]
]);
node.addTargets(['?.css', '?.ie.css']);
В итоге получаем следующий конфигурационный файл .enb/make.js:
`js
var stylusTech = require('enb-stylus/techs/stylus'),
FileProvideTech = require('enb/techs/file-provider'),
bemTechs = require('enb-bem-techs');
module.exports = function(config) {
config.node('bundle', function(node) {
// получаем список файлов (FileList)
node.addTechs([
[FileProvideTech, { target: '?.bemdecl.js' }],
[bemTechs.levels, { levels: ['blocks'] }],
bemTechs.deps,
bemTechs.files
]);
// Собираем CSS-файлы
node.addTechs([
[stylusTech],
[stylusTech, {
target: '?.ie6.css',
sourceSuffixes: [
'styl', 'css', // Общие стили
'ie.styl', 'ie.css', // Стили для IE < 9
'ie6.styl', 'ie6.css' // Стили для IE 6
]
}]
]);
node.addTargets(['?.css', '?.ie6.css']);
});
};
``
Лицензия
--------
© 2014 YANDEX LLC. Код лицензирован Mozilla Public License 2.0.