Question

I’ve got a SCSS-based layout in which I want to use the spacing module from OOCSS.

The OOCSS module is pure CSS – ptl, for example, stands for padding-top: large, where large is a defined value (by default 20px).

I’d like to enhance it with SCSS. So far I’ve been able to replace the fixed values with SCSS variables, so I can change the values in one place if I want to (I don’t want to):

$spacing-small: 5px;
$spacing-medium: 10px;
$spacing-large: 20px;
...
.pts,.pvs,.pas{padding-top:$spacing-small !important}

Now I’d like to be able to use ptn,pvs, etc. as mixins, so I can do this:

.client-name {
  @include spacing-pvs; // this has the same padding properties as pvs
}

I’m flexible in the syntax, but that’s the functionality I’d be interested in having.

The only way I can think of for doing this is manually defining every single mixin:

@mixin spacing-pvs {
  padding-top: $spacing-small !important;
  padding-bottom: $spacing-small !important;
}
.pvs { @include spacing-pvs; }

But there are around 56 styles/mixins. Doing each one individually like this would be pain to write and to maintain.

Is there a better way to do this in SASS/SCSS?

Answer 1

I ended up not using mixins at all. Instead, I left the CSS rules as they were, and I used this less documented feature called @extend. Behold!:

.client-name {
  @extend .pvs; // this has the same padding properties as .pvs
}