gulp-pugbem
Установка
npm install gulp-pugbem --save-dev
Подключение
var gulp = require('gulp');
var pug = require('gulp-pug');
var pugbem = require('gulp-pugbem');
gulp.task('pages', function () {
return gulp.src('app/**/*.pug')
.pipe(pug({
plugins: [pugbem]
}))
.pipe(gulp.dest('dist'));
});
Использование
Блок
блок в pug-коде начинается с точки [перед которой может стоять название тега] блоки можно вкладывать друг в друга, как показано во втором примере
.header
form.search-form
.header
nav.menu
result:
<div class="header"></div>
<form class="search-form"></form>
<div class="header">
<nav class="menu"></nav>
Элемент
элемент в pug-коде начинается с точки и знака подчеркивания [перед которыми может стоять название тега] в примере ниже, блок search-form включает два элемента input и button
form.search-form
input._input
button._button Search
result:
<form class="search-form">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
Модификатор
модификатор в pug-коде начинается с точки и дефиса [перед которыми должен идти блок или элемент] в примере ниже, модификатор назначен блоку search-form и элементу button
Булевый
form.search-form.-focused
button._button.-disabled Search
result:
<form class="search-form search-form--focused">
<button class="search-form__button search-form__button--disabled">Search</button>
</form>
Ключ-значение
form.search-form.-theme_islands
button._button.-size_m Search
result:
<form class="search-form search-form--theme_islands">
<button class="search-form__button search-form__button--size_m">Search</button>
</form>
Микс
микс в pug-коде состоит из блока и следующего за ним одноименного элемента без названия тега [перед элементом не может идти ничего, кроме одноименного блока]
миксы не могут использоваться сами по себе, они являются строительной частью другого блока в примере ниже, блок header включает микс search-form
.header
form.search-form._search-form
result:
<div class="header">
<form class="search-form header__search-form"></form>
</div>
Пример
header.header
nav.menu
a(href="#")._logo Company
.list
a._item.-active(href="#") Home
a._item(href="#") News
a._item(href="#") Gallery
a._item(href="#") Partners
a._item(href="#") About
a._item(href="#") Contacts
h1._title Hello, World!
.myslider._myslider
._slide Content
._slide.-active Content
._slide Content
p._text Good weather
result:
<header class="header">
<nav class="menu">
<a class="menu__logo" href="#">Company</a>
<div class="list">
<a class="list__item list__item--active" href="#">Home</a>
<a class="list__item" href="#">News</a>
<a class="list__item" href="#">Gallery</a>
<a class="list__item" href="#">Partners</a>
<a class="list__item" href="#">About</a>
<a class="list__item" href="#">Contacts</a>
</div>
</nav>
<h1 class="header__title">Hello, World!</h1>
<div class="myslider header__myslider">
<div class="myslider__slide">Content</div>
<div class="myslider__slide myslider__slide--active">Content</div>
<div class="myslider__slide">Content</div>
</div>
<p class="header__text">Good weather</p>
</header>
Параметры
var pugbem = require('gulp-pugbem');
// разделитель элементов
pugbem.e = 'string';
// разделитель модификаторов
pugbem.m = 'string';
Пример
pugbem.e = '**';
form.search-form
input._input
result:
<form class="search-form">
<input class="search-form**input">
</form>
pugbem.m = '++';
form.search-form.-focused
result:
<form class="search-form search-form++focused"></form>
Это может пригодиться, например, когда для разделения модификаторов предпочтение отдается классическому определению.
Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_)
Тогда необходимо задать свойству m соответствующее значение:
pugbem.m = '_';
form.search-form.-focused
result:
<form class="search-form search-form_focused"></form>
License
MIT License
Copyright (c) 2017 Legostaev Vadim (legostaev.vadim@mail.ru)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
