Problems implementing the BEM approach with Sass 3.1.8?

Question

ruby

According to the ideology of BEM , it is worth refusing inheritance in css whenever possible (since it is slow and dangerous, let's say so). That is, instead of

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

Should be written like this

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

For layout we use compass based on sass . Previously, BEM was easily implemented through sass using & (sass substituted the parent selector in place of the ampersand):

.block
  &_header
  &_content

Transformed into what we need

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

But since version sass 3.1.8, the ampersand substitutes the parent selector, only in a valid expression.

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

The consequence of this is that, seeing the construction &_header, sass puts a space after the ampersand and we get a non-working rule at the output: Attention question: if anyone has come across, has a solution been found other than to sit on the old version of sass, or repeat all the names of the parent selectors manually?
.block _header{}

Answer 1

I don't know how relevant this is :)
Do an initializer with this code:

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

Answer 2

You can define a special variable in which to store the parent selector, for example $_:

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

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

Here is what the Sass parser outputs :

.block {
  width: 100px; }

.block_header {
  width: 200px; }

.block_content {
  width: 300px; }

.another {
  width: 100px; }

.another_header {
  width: 200px; }

.another_content {
  width: 300px; }