Read more

Sass: Don't put CSS rules into partials that you import multiple times

Henning Koch
January 24, 2017Software engineer at makandra GmbH

TLDR: When you put CSS rules into a partial and import that partial multiple times, the CSS rules will be duplicated in the compiled CSS.


Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

Here is a Sass partial Show archive.org snapshot called _fonts.sass that contains both CSS rules and a mixin Show archive.org snapshot :

@font-face
  font-family: SuperType
  src: url('supertype.woff')
  
=title-font
  font-family: SuperType

This _fonts.sass is not practical in CSS projects that are organized over multiple files: When you @import fonts from 5 Sass files, the @font-face declaration will be listed 5 times in the final CSS output.

Try to make your Sass partials either all mixins or all CSS rules. If a Sass partial contains any CSS rules, only import it once from your main CSS file (theme.sass or similar).

Posted by Henning Koch to makandra dev (2017-01-24 16:49)