Silent Classes

Sass has a great feature where you can create placeholder selectors (or "silent classes" as many refer to them). These are lines of code that contain a class name, but are not actually compiled into CSS.

Silent classes can be very helpful when working on a Sass project, as they keep your code DRY, and allow you to use the same schemes and paradigms throughout a project. If you would like to learn more about silent classes, I highly recommend Chris Coyier's article on CSS-Tricks.

We have included a couple of silent classes in Concise that can be used throughout your own project, if you don't wish to use the class itself.

Align Center

The %align-center silent class allows you to center a block-level element.

.class {
  @extend %align-center;
}

Show & Hide

The %show and %hide silent classes allow you to show and hide elements, respectively.

.class {
  @extend %show;
}

.class {
  @extend %hide;
}

Screen Reader

The %screen-reader silent class allows you to hide content from the screen, but still allow it to be read by a screen reader.

.class {
  @extend %screen-reader;
}

Hide Text

The %text-hide silent class is the exact same as the %screen-reader class, except with a different name (for those of you that worry about the semantics of the "screen reader" name in your code).

.class {
  @extend %text-hide;
}

Full Width Image

The %full-width-image silent class allows you to create a full-width, block-level image.

.class {
  @extend %full-width-image;
}

Font Weights

Even though it's just one line of code, the %weight-* silent classes can be useful if you don't want to worry about remembering the actual number for a given font weight. You can just refer to them as "light", "normal", or "semibold".

.class {
  @extend %weight-light;
}

.class {
  @extend %weight-normal;
}

.class {
  @extend %weight-semibold;
}