Problems of implementation of BEM with Sass 3.1.8?

0 like 0 dislike
5 views
Ideology BEM is possible to refuse the inheritance in css (as it is slow and dangerous, so to speak). Ie instead

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


You should write so

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


For layout use compass is based on sass. Before BEM is easily implemented using sass with & (prepend sass parent selector in place of the ampersand):

.block &_header &_content


Transformed in the required

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


But starting with version 3.1.8 sass, the ampersand inserts the parent selector, only in a valid expression.
Deprecate the 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.


The consequence of this is that, seeing the design &_header, sass puts a space after the ampersand, and we get the output outside of a rule:

.block _header{}

Attention a question: if who faced, whether has found a solution except to sit on an old version of sass, or to repeat all the names of parent selectors manually?
by | 5 views

2 Answers

0 like 0 dislike
I don't know how it's still relevant :)
\r
Make the initializer with this code:
\r
\r
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 
by
0 like 0 dislike
You can define a special variable in which to store the selector of the parent, for example $_:
\r
$_: '.block'; #{$_} { color: #111; } #{$_}_header { color: #222; } #{$_}_content { color: #333; } $_: '.another'; #{$_} { color: #444; } #{$_}_header { color: #555; } #{$_}_content { color: #666; } 

\r
This is what gives the Sass parser:
\r
.block { width: 100px; } .block_header { width: 200px; } .block_content { width: 300px; } .another { width: 100px; } .another_header { width: 200px; } .another_content { width: 300px; } 
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
3 answers
0 like 0 dislike
1 answer
asked Apr 3, 2019 by CAMOKPYT
110,608 questions
257,186 answers
0 comments
28,707 users