Betwixt Code and Music
The Iron Yard - Day 04
August 27, 2015 —
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.
![Michael D. Mathew.](/static/mike-avatar-b2f7022aa33d8d9f5842b763d3edaa4d.jpeg)
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.