В предварительных релизах Sass 3.3 появилась возможность удобной записи селекторов по методологии БЭМ, в которой вложенные элементы и модификаторы получают префикс по имени родителя. Теперь селекторы вида&__e и &--m, вложенные в .block, станут в итоговом CSS .block__e и.block--m. В предыдущих версиях эту возможность пытались реализовать громоздким селектором @at-root #{&}__e. Установить предварительную версию Sass 3.3 RC5 можно командой gem install sass --pre
БЭМ синтаксис
В новой версии мы получим возможность писать так:
.block { /* styles */ &__child { /* styles */ } &--modifier { /* styles */ } }
Что скомпилируется в:
.block { /* styles */ } .block__child { /* styles */ } .block--modifier { /* styles */ }
О, а у кого-нибудь есть примеры best practices для stylus в контексте БЭМ?
Спасибо за интересную информацию, скорей всего источником является статья Что нового в SASS 3.3 и она более информативна. Кроме новой возможности создавать сложные селекторы такого вида:
$base:".module";#{$base}{#{&}#{$base}-something{/* ... */}}
которая делает возможным возможность писать БЭМ синтаксис так:
.block{/*styles*/&__child{/*styles*/}&--modifier{/*styles*/}}
что скомпилируется в:
.block{/* styles */}.block__child{/* styles */}.block--modifier{/* styles */}
Я обратил внимание на Sourcemaps интересное новшество, которое позволяет нам отлаживать скомпилированный и минифицированный код. При компиляции SASS 3.3 создает фал с расширением .map который умеет понимать Chrome 28 + и с помощью DevTool и показывать при инспекции элемента ссылку на место расположение селектора в исходном файле. Подробнее о Sourcemaps рассказал Райан Седдон с статье Введение в Javascript Source Maps (перевод оригинал), а также инструкция «Поддержка Sass» в Chrome Dev Tools.
При компиляции CSS bem-tools указывает исходные файлы в общем скомпилированным, думаю не сложно его научить делать Sourcemaps. По моему, это будет очень полезно.
Может быть bem-tools это уже умеет?
спасибо!!
может быть Рома что-то подскажет.
Что именно подразумевается под «best practices»? Возможность писать `&__element`, `&_modifier` и т.д. в Стайлусе уже есть давным давно.
Еще, еще!
Как благородные доны поступают в случае, когда хочется сделать каскад от модификатора к элементу, но не хочется писать все время имя блока? Есть ли красивый способ?
Есть ли в публичном доступе какой-нибудь годный набор миксин?
Статья: An Introduction to the BEM Methodology
Автор: Dan Tello, фронтенд-разработчик, Dan joined Viget after four years at Sage Communications, where he left as Senior Graphic Designer. Outside of work he enjoys good food and friends, pipe tobacco and conversation, and disc golf.
Перевод: Чуть больше SASS для (БЭ)Модификаторов
Переводчик: Сергей Смольников
Уже не так актуально с выходом релиза Sass 3.3