How do you include pseudo selectors?
DTwigs opened this issue · 17 comments
I'm having some trouble figuring out how to incorporate pseudo selectors and also how to share styles between multiple modifiers.
How do I write something like this with sass-bem?
.block {
display: blockish;
}
.block:hover, .block--hover {
display: hover-state;
}
Hi @DTwigs, to do this your code should look like this:
// .block
@include b(block) {
display: blockish;
// .block:hover
@include hover {
display: hover-state;
}
// .block--hover
@include m(hover) {
display: hover-state;
}
}
There is no way to write this two selectors separated by comma yet, but I'm going to add this support.
Thanks for the help!
You are welcome!
Hi @zgabievi, I'm on the cusp of deciding to migrate our whole site to sass-bem. I am curious if you have a time line as to when you could implement the multi selector mixins?
Oh sweet, I'll check it out. Thanks!
This is looking pretty good but I think there is a bug. The parse method is outputting the modifier classes without the base block class. It is also adding the styles from the modifier to the block style.
@include b('button') {
background-color: red;
@include parse('m:hover', ':hover') {
color: blue;
}
}
outputs:
.button {
background-color: red;
color: blue;
}
--hover, .button:hover {
color: blue;
}
So it looks like the m:hover
isn't appending the block name. Am I using this correctly?
Looking good. The most recent changes have fixed the issue that I was seeing. I'm going to start working on translating our project over to sass-bem. Thank you very much!
As I'm going through I have a couple questions.
How can I write this in sass-bem?
.button {
&,
&--small {
color: blue;
}
}
Is there a way to write that without repeating color: blue
?
One more scenario:
.button {
&--disabled, &[disabled] {
background-color: grey;
}
}
Since [disabled]
is an attribute selector and not a pseudo selector, is there a way to write that with sass-bem?
First please update to 2.3.2, or follow this commit 73234b2;
For the first question, use:
@include b('button') {
@include parse('b:button', 'm:small') {
color: blue;
}
}
Outputs:
.button, .button--small {
color: blue;
}
Second scenario:
@include b('button') {
@include parse('m:disabled', '[disabled]') {
background-color: grey;
}
}
Outputs:
.button--disabled, .button[disabled] {
background-color: grey;
}
Wow, you are on top of this. Thanks! This is great!
I am having trouble installing the 2.3.2 version. Did you publish it to npm?
npm ERR! No compatible version found: sass-bem@^2.3.2
npm ERR! Valid install targets:
npm ERR! 2.3.1, 2.3.0, 2.2.1, 2.2.0, 2.1.1, 2.1.0, 1.0.0, 0.2.1, 0.2.0
Sorry, I was pretty sure that I published it :D
Haha thanks!
I have another request, instead of using @include parse('b:blockName')
to mimic the & { }
can we use @include parse('&')
?
This would make it so we can do this for blocks, elements, and modifiers.
Right now in the code there is a little shortcut where you can type @include parse(' ')
and it has the same effect, but I'd prefer to not use an empty space and use an &
so it's more explicit and familiar. What do you think?
Great idea. I'll do that ;)
Now you can upgrade to 2.3.3
and use &
symbol in parse mixin. I'll close this issue for now ;)