SASS variables and inheritance

Question

Suppose I have two virtually identical HTML structures, but with different class names. They only differ by a few variables, like width and h

Answer 1

I don't see the advantage of creating a mixin only for this specific situation, it is hardly useful on a couple of occasions, but it is just my opinion.

Anyway, I've created a mixin, just for fun. I think that it can help you to deal with this specific situation. Here is the mixin and I'm going to try to explain how it works:

@include button($selectors, $property, $values, $child: false) {
  // Common properties that are included in all $selectors  
}

This mixin takes four parameters:

• $selectors: List of selectors, in your case, .widget-a and .widget-b, they should be enclosed in quotes.

• $property: Here you should enter the name of the property, in your case width

• $values: Values ​​are, as the name implies , the values of the property for each selector

• $child: Here you can enter the name of a child, this is optional.

• Into the brackets {} you should write all the properties that you want to include in all $parameters

• The order of each selector must match the order of their corresponding value

So, here's an example using this mixin to solve your problem. This is the @include:

@include (".widget-a" ".widget-b", width, 50px 100px, button) {
  background: red;
}

And this, the code that returns:

.widget-a button, .widget-b button {
  background: red; }

.widget-a button {
  width: 50px; }

.widget-b button {
  width: 100px; }

This is another way to achieve the same result:

@include button(".widget-a .button" ".widget-b .button", width, 50px 100px)  {
  background: red;
}

Download the mixin here