The Iron Yard - Day 04

Sass

(image courtesy of sass-lang.com)

Whoa, baby, this stuff is cool. Syntactically Awesome Style Sheets or, SASS, makes writing CSS a much easier process. There are two versions. Hamburger A is Sass, Hamburger B is SCSS.

We learned about the SCSS flavor in class today at The Iron Yard. Sass lets a developer write complex CSS in a simplified way using various patterns.

Nesting

This makes the HTML and CSS look more similar in structure. The code snippet below has a nav tag (which functions as a div container, just semantically different) which contains an anchor tag. The SCSS lets a developer nest a CSS property inside of other ones. SCSS will automatically compile to stock CSS in another file. As a visual person, this is extremely helpful because I can now easily see which tags are inside of others as opposed to searching through hundreds of CSS tags.

This is generated:

nav {
  background-color: #fff;
  padding: 0.5em 0;

  a {
    margin: 0 1em;
    color: #565D64;
  }
}

Which puts this into the stock CSS file:

nav {
  background-color: #fff;
  padding: 0.5em 0;
}

nav a {
  margin: 0 1em;
  color: #565D64;
}

And you might be thinking, “Big whoop. That is just as easy to write in CSS!” Well, you might be right, pardner, but as you mentally extend this to a larger framework of a site, it becomes easy to imagine the usefulness of this here technique.

Variables

SCSS allows defined variables to be used throughout the code. I learned about some scenarios today which made this seem like the greatest thing since the wristwatch. For example…

Situation

You are a designer (or an indy developer) dealing with three different main colors on the site you are building. You apply the variable method to your colors like so:

$primaryColor: #bada55;

And you apply it to code like this:

a {
  color: red;
  background-color: pink;
}

You are building your site and all is fine until one afternoon your client says that she really wants a deeper shade of green. No sweat if you used the $primaryColor variable. Just go switch the variable at the top of the file and all of the colors switch throughout the layout.

Thankfully, there was also a meetup for ATXSass the very same day that I learned about Sass. What a break! I headed downtown to the Capital Factory and learned more about Sass from Abby Larner and Una Kravets. More to come about Sass, so stay tuned.

Written by Mike Mathew who lives and works in Dallas building useful things. Sometimes he posts on Mastodon. Mike also wears many hats at Presto Assistant where he is a co-founder, owner, and product engineer.