How I write my Sass

Back at the beginning of May I added some ‘rules’ to how I write my Sass (or SCCS) on a front-end project.

I thought as I’ve just released version 2 of Sassifaction I’d share my decisions in this blogpost to help clarify to myself how I should be writing my Sass and hopefully helping others make decisions on how they write their Sass and order things.

At the beginning

The follow short set of rules are part of my overall ‘guidelines’ inspired by and adapted from @CSSWizardry and @necolas amonst many others.

The Beginning Comment

Each ‘lump’ of Sass should have a comment explaining what it is doing, what it is for and an example of the HTML that it’s being applied to. These are the only CSS comments to be found in any Sass document. This is so you can have a multi-line comment without needing to include the // every line.

/*

  Header Element
  ============

  This is the Sass for the header element layout for the project.

  <header role=”banner”>
  
  </header>

*/

Starting your Sass

At the top of your block of Sass you should include any $variables, @mixins and @extends that are relevant to the element.

.module {
  $main-color: #D13400;

  @include remit(margin-bottom, 24);

  @extend %btn;

}

As you can see each Sass specific item has an empty line underneath. There is also an empty line at the end of the block too.

Add all the things

After you’ve declared these bits of Sass you would then include any CSS that the element requires.

.module {
  $main-color: #D13400;

  @include remit(margin-bottom, 24);

  @extend %btn;

  background-color: $main-color:
  border-radius: $radius-sml;
  cursor: pointer;
  padding: 0 3%;
  width: 24%;

}

Pseudo & Combinator Selectors

If the element we’re coding up has a pseudo selector or there is a combinator selector required these go after the block of CSS we’ve added.

.module {
  $main-color: #D13400;

  @include remit(margin-bottom, 24);

  @extend %btn;

  background-color: $main-color:
  border-radius: $radius-sml;
  cursor: pointer;
  padding: 0 3%;
  width: 24%;

  &:hover, &:focus {
    background-color: darken($main-color, 30%);
  }

  & > li {
    font-weight: 700;
  }

}

Nesting Elements

If you need to nest elements (no more than 3 levels deep). Then you would add the nested elements at the end of the block with a space between each nesting.

.element {
  background: blue;
  display: block;
  margin: 0 auto;
  width: 44.15467%;

  h1 {
    color: green;
    font-size: 32px;
    font-size: 2rem;
  }

  .box {
    width: 80%;
    margin: 0 auto;
  }       

}

Nesting Media Queries

All media queries are nested inline with the element rather than ‘at the end’.

.element {
background: red; @media (min-width: 700px) { background: blue; } }

Nesting Media Queries with Nested Elements

Media Queries are placed at the end of the block after the pseudo and combinator selectors and any other nested elements. With a space separating them.

.element { 
  background: blue;
  display: block;
  margin: 0 auto;
  width: 44.15467%;
  
  h1 {
    color: green;
    font-size: 32px;
    font-size: 2rem;
  }

  .box {
    margin: 0 auto;   
    width: 80%;
  }

  @media (min-width: 700px) {
    width: 100%;

    h1 {
      font-size: 48px;
      font-size: 3rem;
    }

    .box {
      width: 95%;

      & > li {
        margin-left: 2%;

      }
    }

  }

}

Inline Commenting

If you need to add a comment to part of a block of Sass then you would add a Sass comment (not a CSS comment) after the element.

.box {
  margin-bottom: (2 * $doc-line-height); // bigs more space

}

Wrapping Up.

This is how I structure my Sass at the moment. It’s an on going process of legibility and ease of use. As I’m generally the only person that will write the Sass/CSS for a project this works for me. I beseech you to take this and rip it apart, move bits, add bits and role your own and document it for you and/or your team.