How do you include pseudo selectors?

[DTwigs]

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;
}

[Zura Gabievi]

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.

[DTwigs]

Thanks for the help!

[Zura Gabievi]

You are welcome!

[DTwigs]

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?

[Zura Gabievi]

Hi @DTwigs, I've created parse() mixin, which is in 61fc0db. I'll write some documentation and than will be change version to 2.3.0

[DTwigs]

Oh sweet, I'll check it out. Thanks!

[DTwigs]

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?

[Zura Gabievi]

I've made some changes, but I couldn't reproduce your issue. Can you try this one more time with 2.3.1 release? Changes are in 9f0bc61

[DTwigs]

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!

[DTwigs]

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?

[Zura Gabievi]

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;
}

[DTwigs]

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

[Zura Gabievi]

Sorry, I was pretty sure that I published it :D

[Zura Gabievi]

There you go NPM

[DTwigs]

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?

[Zura Gabievi]

Great idea. I'll do that ;)

[Zura Gabievi]

Now you can upgrade to 2.3.3 and use & symbol in parse mixin. I'll close this issue for now ;)