Sass Rule Layout

We've been going through a bit of a reshuffle at work with regards to our front-end conventions and layout. With the introduction of Sass into the team, we took it as an opportunity to shake things up in the way we do things. ## File Layout In every project we use Luigi as our base framework and build on top of that. In terms of File Layout we have: * _style.scss - This should never have styles and only be used for routing and includes (e.g. Luigi and the other below files) * _base.scss - This includes all the base element styles (e.g. a, h1 etc.) * _layout.scss - This contains all the styles that are to do with the layout and structure of the site * _main.scss - This houses all the other styles - modular and specific. * _variables.scss - Contains all the variables and custom mixins for that project With the files set up, we then revised the rule layout. ## Rule Layout When coding Less, we used to do 1 line, but still nest:

.class {font-size: 24px; color: red;
.subclass {color: blue;}

This was readable and encouraged concise and compact declarations (otherwise you'd have to start scrolling). The main problem with this was git merge issues. As git works on a line per line basis if 2 developers changed declarations in the same line, you would have to manually merge it. We now opt for a multi-line rule layout (this decision was also helped by Sass having a command line CSS compressor) with the following format:

.class-name {
$variables: 10px; // Class specific variables
@extend .other-class; // Followed by extends
@include border-radius(); // Then any mixins
background: red; // After that, standard declarations
font-weight: bold;
&:hover { // Any pseudo elements
color: blue;
.class-sub { // And any child elements
color: blue;
.parent & { // Contextual overrides
font-weight: 100;
@include bp(meerkat) { // Media Queries come last
background: salmon;
.class-sub {
color: orange;

View this post on Gitlab

You might also enjoy…

  • Be a Better Road User

    Posted on 18th February 2014.

    I've been cycling since I can remember, and driving since 2009. Over the last few years, I've believed something more and more and I would like to make a bold statement - Cyclists make better drivers, drivers make better cyclists

Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.