Проблемы реализации подхода БЭМ с Sass 3.1.8?

Question

[Алексей]

По идеологии БЭМ стоит по возможности отказываться от наследования в css (так как это медленно и опасно, скажем так). Т.е вместо

.block{}
  .block .header{}
  .block .content{}

Следует писать так

.block{}
  .block_header{}
  .block_content{}

Для верстки используем compass основанный на sass. Раньше БЭМ легко реализовывался через sass c помощью & (sass подставлял родительский селектор на место амперсанда):

.block
  &_header
  &_content

Преобразовывался в нужный нам

.block{}
  .block_header{}
  .block_content{}

Но начиная с версии sass 3.1.8 амперсанд подставляет родительский селектор, только в валидное выражение.

Deprecate parent selectors followed immediately by identifiers (e.g. &foo). This should never have worked, since it violates the rule of & only being usable where an element selector would.

Следствием этого является то, что, видя конструкцию &_header, sass ставит пробел после амперсанда и мы получаем на выходе нерабочее правило:

.block _header{}

Внимание вопрос: если кто сталкивался, было ли найдено решение, кроме как сидеть на старой версии sass, либо повторять все имена родительских селекторов вручную?

Comments

[Алексей]

Решение для RoR найдено, но может кто-то знает решение просто для Compass?

[Дима]

а где вы такое вычитали?

Answer 1

[aishek]

Не знаю, насколько это ещё актуально :)

Делаете initializer с вот таким кодом:

Rails.application.config.after_initialize do |app|
  app.assets.register_postprocessor 'text/css', :sass_bem_class_builder do |context, data|
    data.gsub(/([a-zA-Z0-9\-]+)[ ]([_]+)/i){ $1 + $2 }
  end
end

Comments

[Алексей]

Спасибо! Похоже проблема решена=) Я пытался придумать контр-пример и не нашел его.
Для тех, кто будет использовать данный код: в третий класс символов надо добавить дефис, чтобы модификаторы находить, а не только дочерние элементы.

[GenaB]

Подскажите, как этот initializer правильно прописать в Ubuntu 12.04?

Просто добавление в config.rb выдает ошибку:
NameError on line 2 of /.../site.ru/config.rb: uninitialized constant Compass::Configuration::Serialization::Rails

[aishek]

Гена, не обижайтесь, но вам нужно внимательно почитать http://guides.rubyonrails.org/configuring.html

[GenaB]

Ведь сюда я не сразу написал, в гугле поискал, и эту страничку тоже смотрел, но либо не работает в этом виде код, либо я не так понимаю, что делать.
Я не программирую на руби, и если не сложно, подскажите, как сделать правильно.

[Алексей]

Геннадий, если я правильно понимаю ситуацию, то проблема в том, что данное решение подходит только, если вы используете compass вместе c RoR. Решения для compass вне RoR пока не найдено.

[GenaB]

Если так, то это очень печально.
Но может этот код как-то можно использовать, compass же на руби, или там привязка именно к фреймворку ROR?

[Алексей]

Код, чисто теоретически использовать можно, но тут именно привязка к RoR в плане регистрирации постпроцессор для css

[GenaB]

Спасибо за разъяснение. Пользователи БЭМ вне ROR в большой печали…

Answer 2

[avrelian]

Можно определить специальную переменную, в которой хранить селектор родителя, к примеру $_:

$_: '.block';
#{$_} { color: #111; }
  #{$_}_header { color: #222; }
  #{$_}_content { color: #333; }

$_: '.another';
#{$_}  { color: #444; }
  #{$_}_header { color: #555; }
  #{$_}_content { color: #666; }

Вот что выдает парсер Sass:

.block {
  width: 100px; }

.block_header {
  width: 200px; }

.block_content {
  width: 300px; }

.another {
  width: 100px; }

.another_header {
  width: 200px; }

.another_content {
  width: 300px; }

Comments

[avrelian]

Упс )
Конечно же он выдает это:

.block {
  color: #111; }

.block_header {
  color: #222; }

.block_content {
  color: #333; }

.another {
  color: #444; }

.another_header {
  color: #555; }

.another_content {
  color: #666; }

[Алексей]

Спасибо, но сами понимаете, далеко так не уедешь=)

Так, например, есть тройная вложенность, но это редко, чаще модификаторы

.block{}
  .block_header{}
  .block_header-news{}
  
  .block_content{}
  .block_content-wide{}

Тут придется переопределять переменную как при спуске на каждый новый уровень уровень, так и обратно возвращать при возврате с него. Больше ошибок наделаешь, чем пользы, уж тогда проще вручную писать эти безумные повторения=).