Question

I’m trying to get SASS to do something akin to an abstract superclass in programming. I’m getting as far as the superclass part

.box {
  @include span-columns(1);
  @include border-radius(5px);
  height: 360px;
  overflow: hidden;
}


article {
  @extend .box;
}

figure {
  @extend .box;
}

This is a way to define commonalities of boxes without duplicating them in the generated CSS, as would happen with a mixin. However, this solution has the blemish of defining a rule for a (CSS) class “box” that I don’t really need and want.

To be sure, this is a minor issue, still I’d like to know if there is a way to make “.box” into a label that is only used during SASS preprocessing and does not appear in CSS.

Answer 1

You want to define your “superclass” using a % instead of a .

%box {
  @include span-columns(1);
  @include border-radius(5px);
  height: 360px;
  overflow: hidden;
}

article {
  @extend %box;
}

figure {
  @extend %box;
}

Note that this requires version 3.2+