With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass. Here are some ideas that I’ve been gravitating toward. Perhaps they are useful to you or help you formulate ideas of your own. If you’re looking for more examples, Sass Guidelines is another good place to look.
#Use Your Regular CSS Formatting Rules / Style Guide
This post is about Sass-specific stuff, but as a base to this, you should follow a whatever good CSS formatting guidelines you are already following. If you aren’t yet, this roundup of style guides may help you. This includes things like:
- Be consistant with indentation
- Be consistant about where spaces before/after colons/braces go
- One selector per line, One rule per line
- List related properties together
- Have a plan for class name naming
- Don’t use ID’s #hotdrama
- etc
#List @extend(s) First
.weather { @extend %module; ... }
Knowing right off the bat that this class inherits another whole set of rules from elsewhere is good. Another benefit is that overriding styles for that inherited set of rules becomes much easier. Knowing when to use @extend versus @include can be a little tricky. Harry does a nice job of differentiating the two plus offers thoughts on how to use them both.
#List @include(s) Next
.weather { @extend %module; @include transition(all 0.3s ease-out); ... }
Next up is your @includes for mixins and other functions. Again, this is nice to have near the top for reference, but also allows for overrides. You might also want to make the call on separating user-authored @includes and vendor-provided @includes.
#List “Regular” Styles Next
.weather { @extend %module; @include transition(all 0.3s ease-out); background: LightCyan; ... }Website
