why and how I started using SASS

I do not jump on technological bandwagons. I approach my work building websites in much the same way I approach doing mathematics. I will do my best with what I have to solve the problem, but if I need a new or better tool to get the job done I will go out and get it.

And until variables land firmly in CSS, I need a better way to style my pages.

Reason 0: dependencies

I love calc(). It makes it incredibly easy to do something cute like this:

.fixed-sidebar {
   height: 100vh;
   width: 48px;
}

body {
   margin: 0 0 0 48px;
   width: calc(100vw - 48x);
}

A sidebar running up the entire height of the page, and a body that will take up the remaining horizontal space.
Mmm.
But maybe I want my sidebar a little bit thinner…or wider…three places to make that change!

Reason 1: colors

I usually just keep things black and white to whatever extent possible to be perfectly honest. But lately, as I try to flex my design skills, I use more color.

And now I know that sometimes one color, when we keep things consistent, can keep popping up E V E R Y  W H E R E.

What if I could just define an element’s width or a color code once, and use it multiple times?

If I had CSS variables I could. Right now I can’t. Except I can, because I have known about CSS preprocessors since October and just forestalled using one. The need has now been sufficiently created.

The great news is, it was incredibly easy to get started. All I needed was:
Sass documentation and,
Sass autocompile for Atom.

If I am honest, the biggest reason I did not get started with Sass until now was that I was lazy and hesitant to add the step of compiling it to my build process. But when it happens every time you save your sass file, well that is entirely painless.

I know Sass is deeper than variables. I am especially interested in how it handles extensions/inheritance. But the need to not repeat myself was the last straw that drove me to embrace it, and I am very happy that the barrier to entry was practically non-existent.

Advertisements
why and how I started using SASS

Would love to hear from you:

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s