Go for SASS instead of CSS

So have you heard of the Sassy kid in the web development block yet? Syntactically Awesome StyleSheets (SASS) is the most mature, stable, and powerful professional grade CSS extension language in the world. It is indeed CSS with superpowers!

Terseness is Overrated

During my HTML-CSS-Only days, I found my verbosity extend to my CSS files as well. This made the website files bulky due to repetition.

On a recent Software conference I had attended, a key discussion point was Rule #11 of the Pragmatic Programmer – DRY. DRY (Don’t Repeat Yourself) is a software development principle for reducing repetition and promoting reusability. This principle states that “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system”. Although this was in the context of database schemas, I am sure this applies to WordPress development too  – specifically to my rather repetitive CSS writing skills.

And then came SASS

 

SASS is a scripting language that is interpreted into CSS. There are two syntaxes in use at present – Sassy CSS (SCSS) and Indented syntax (or just SASS). I have decided to explore the SCSS syntax which is closer to CSS. I have jotted down some of the key advantages of SCSS below:

Variables

Colours, fonts stacks, border lengths and margins are often reused across an entire website. Storing them in variables not only avoids repetition, but makes it easier to maintain and make amendments later on. Here is an example usage:

$primary-color: #CDDC39;
#header { 
    background-color: $primary-color; 
}
#footer { 
    color: $primary-color; 
}

Relative Design Elements

Relative design elements makes it easier to manage code. For example, colours a shade lighter/darker than another specified colour or inner borders thicker than the outer border.

$base_color: #CDDC39;
.block1 { background: darken($base_color,20%); }
.block2 { background: lighten($base_color,20%);}

@base-margin: 25px;
#header { margin-top: @base-margin + 10px; }

Nesting

In CSS, we write out every rule set separately, which often leads to long selectors that repeat the same stuff over and over. But with SCSS not only can the rules be nested, but pseudo-classes can be created using an “&” and then nested. Here is a typical example:

nav {
  ul { list-style: none;}
  li { display: inline-block; }
   a { color: $accent-color;
       &:hover   { color: $link-hover-color; }
       &:visited { color: $link-visited-color; }
  }
}

Modularity – Import Partials

Files that contain little snippets of CSS can be created called partials. These can be then included in other SASS files using an @import directive. This is a great way to modularise CSS and keep things easier to support.

Modularity – Extend Properties

Another way to achieve modularity is through sharing a set of CSS properties from one selector to another.

.message {
  border: 1px solid #CCCCCC;
  padding: 10px;
  color: #333333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}

Modularity – Mixins

In CSS, sometimes it is tedious to be repetitive. Especially for repeating CSS declarations with different vendor prefixes. This is where the magic of mixin comes in:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }

LESS is More

LESS is inspired by SASS. LESS was designed to be as close to CSS as possible. This meant existing CSS can be used as valid LESS code. Since then SASS also introduced the CSS-like syntax called Sassy CSS or SCSS.