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

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.


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).

Henning Koch