mardi 11 juin 2019

Is selector inside a scss mixin valid?

CSS syntax in general is

selector {
 declarations ...
}

I have mostly seen mixin taking care of declaration part

example

@mixin border-radius($rad) {
 border-radius: $rad;
}

// and used like 

some-selector {
 @include border-radius(5px)
}

but can a mixin return a complete selector itself

@mixin button {
  .button {
    color: red
  }
}

// now if I have button nested in any of my dom element I can say

selector-for-dom-element {
  @include button;
}

is the second case valid syntax?

I have seen that it works but not sure if its documented and should I use it in production.

as an answer to this, I am only looking to confirm that its valid syntax and any reference to such a claim.

Or I am doing it the wrong way, any other way to do it... except using extend?

Aucun commentaire:

Enregistrer un commentaire