Matt Andrews
Software engineer making apps – that aren’t apps – and more at the FT. 会说汉语.

Abstract class in Sass / Scss via the placeholder selector

Super useful snippet that is going to literally save us bytes of useless CSS from our web apps.

Sass / Scss supports abstract selectors – which are removed from the compiled CSS but can be @extend‘ed.

Here’s some SCSS:-

1
2
3
4
5
6
7
8
9
10
11
%abstract-class {
font-family: Verdana;
}

#my-div {
@extend %abstract-class;
}

#my-other-div {
@extend %abstract-class;
}

Which will be compiled as:-

1
2
3
#my-div, #my-other-div {
font-family: Verdana;
}