Sass Formatter and a sneaky way to make sure you are writing your Sass properly

Today is the day where I am implementing Sass in my first large project. To be honest, I’m a bit nervous but I’m going to stay the course as this is usually how I learn new ways to do something better. Using Sass variables is a no brainer and I love how I can write my color variables at the top and I’m go to go the rest of my project. I also love how I can break my css into multiple logical files (prefacing them with the underscore i.e. _normalize.scss) and then I can throw them at the top of my style.scss file with something like:
[cc]
@import “normalize”
@import “bootstrap”
[/cc]
Note: Don’t forget the quotations or you’ll get an error
Note: You don’t need the extensions and you don’t need to preface the files with the underscore (but you need that underscore in the actual file name in order for Sass to realize it needs to pull those files into one file.
I’m using Sublime Text 2 as my editor and I added the Sass and Compass plugins. The great thing is I just make sure that ‘Compass’ is my build selected and then I just press ctrl + b and all the sass files are smushed into one file. I won’t compress them all until it is ready for production. During development I need to see what css is generated.

Since I’m new to Sass and I know that nesting tags more than 3 deep is a no-no, I wish there was a way to see how sass should be properly formatted. So what I did is create a testing folder that I can use to find out the proper way to format .scss (I’m not use .sass because I want to keep writing css code so I won’t forget it (.sass is more efficient but .scss really is almost like typing css).

So I was using the Chrome developer tool on a twitter bootstrap page I am starting with and I came across this code:

[cc lang=”css”]
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
color: white;
background-color: black;
}
[/cc]

I’ve watched a few nesting tutorial videos on Sass but I was getting confused on how to write this in .scss format. That’s where I found this post on formatting Sass that gave me an idea.

I can convert css to .scss with this code in the Terminal:

[cc]
$ sass-convert messy.css clean.scss
[/cc]

And it magically creates a clean.scss file with the nesting .scss properly formatted:
[cc lang=”css”]
.navbar-inverse a {
color: white;
background-color: black;
&:hover, &:focus {
color: white;
background-color: black; } }
[/cc]

Pretty darn cool!

Leave a Reply

Your email address will not be published. Required fields are marked *