CSS related techs — Edit
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.
docs
lib
techs
test
.editorconfig
.eslintignore
.eslintrc
.gitignore
.jscsrc
.npmignore
.travis.yml
CHANGELOG.md
CONTRIBUTORS.md
LICENSE.txt
README.md
appveyor.yml
package.json

README.md

enb-css

NPM version Build Status Build status Coverage Status Dependency Status

Пакет предоставляет набор ENB-технологий для сборки CSS-файлов в проектах, построенных по методологии БЭМ.

Технологии пакета enb-css:

  • css — технология собирает исходные CSS-файлы.
  • css-imports — технология состовляет список @import'ов из исходных CSS-файлов.

Принципы работы технологий и их API описаны в документе API технологий.

Обзор документа

Быстрый старт

1. Установите пакет enb-css:

$ npm install --save-dev enb-css

Требования: зависимость от пакета enb версии 0.16.0 или выше.

2. Опишите код стилей в файле с расширением .css:

 blocks/
 └── block/
     └── block.css

3. Добавьте в конфигурационный файл .enb/make.js следующий код:

var CSSTech = require('enb-css/techs/css'),
    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([CSSTech, {
            // target: '?.css',
            // filesTarget: '?.files',
            // sourceSuffixes: ['.css']
        }]);
        node.addTarget('?.css');
    });
};

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

Добавление вендорных префиксов

Технология css поддерживает Autoprefixer.

Для автоматического добавления вендорных префиксов в процессе сборки используйте опцию autoprefixer.

Минимизация CSS-кода

Для минимизации CSS-кода используется csswring.

Включить минимизацию можно с помощью опции compress.

Source Maps

Технология css позволяет строить карты кода (sourcemap) с информацией об исходных файлах.

Включить построение карт кода можно с помощью опции sourcemap.

Дополнительная документация

Лицензия

© 2015 YANDEX LLC. Код лицензирован Mozilla Public License 2.0.