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 online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
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)