Stylus related techs
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
techs
test
.editorconfig
.eslintignore
.eslintrc
.gitignore
.jscs.json
.travis.yml
CHANGELOG.md
LICENSE.txt
README.md
api.en.md
api.ru.md
appveyor.yml
package.json

README.md

enb-stylus

NPM version Build Status Build status Coverage Status Dependency Status

Пакет предоставляет 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 = 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');
    });
};

Особенности работы пакета

Совместное использование Stylus и 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-кода

Для минимизации 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.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.