Пакет предоставляет ENB-технологию для сборки CSS- и Stylus-файлов в проектах, построенных по методологии БЭМ.
Принципы работы технологии и ее API описаны в документе API технологии.
Совместимость: технология пакета enb-stylus поддерживает версию CSS-препроцессора Stylus 0.54.2.
В БЭМ-методологии стили к каждому блоку хранятся в отдельных файлах в директориях блоков.
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 = 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
В сборку попадут оба файла:
@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-файл:
@import "../blocks/block/block.styl";Пример 3. Если у одного блока есть несколько реалиализаций, но на разных уровнях переопределения:
common.blocks/
└── block/
└── block.styl
desktop.blocks/
└── block/
└── block.css
bundle
└── bundle.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:
node.addTechs([
[stylusTech], // для основного CSS
[stylusTech] // для IE
]);3. Добавить новую цель сборки для IE файла — ?.ie6.css:
node.addTechs([
[stylusTech],
[stylusTech, { target: '?.ie6.css' }] // IE 6
]);
node.addTargets(['?.css', '?.ie6.css']);4. В БЭМ проектах принято подключать стили с помощью условных комментариев.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--[if gt IE 9]><!-->
<link rel="stylesheet" href="index.css"/>
<!--<![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" href="index.ie.css"/>
<![endif]-->
</head>
<body>Важно, чтобы файл, подключаемый для IE, содержал стили не только специфичные для него, но и общие для всей страницы.
Чтобы собрать такой файл, нужно расширить список суффиксов с помощью опции sourceSuffixed.
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:
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent