Skip to content
/ enb-css Public
forked from enb/enb-css

CSS related techs — Edit

License

Notifications You must be signed in to change notification settings

f-o-r/enb-css

This branch is 68 commits behind enb/enb-css:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

30df9b5 · Jun 30, 2016

History

29 Commits
Jun 30, 2016
Jun 30, 2016
Oct 29, 2015
Jun 30, 2016
Sep 14, 2015
Sep 14, 2015
Oct 7, 2015
Sep 14, 2015
Oct 7, 2015
Sep 14, 2015
Sep 14, 2015
Oct 29, 2015
Mar 21, 2016
Mar 21, 2016
Mar 21, 2016
Sep 14, 2015
Mar 21, 2016

Repository files navigation

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.

About

CSS related techs — Edit

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%