A post for first time SASS users

June 21, 2013 - By

I recently got sharing my limited experience using SASS with a friend who’s just getting into it. I thought I’d share these ramblings here to reference in the future!

In short: don’t let the learning curve intimidate you. Jump in, even if you only use one small feature it’s worth it! 

If you’re on a Mac, I’d say invest in Codekit. I started with this tutorial: http://css-tricks.com/video-screencasts/111-get-yourself-preprocessing-in-just-a-few-minutes/ – ignore the Jade stuff, that’s just wacky, haha.
Like I say, starting small has been really nice. You don’t need to be a master yet!
I’ve only done 2 actual projects using it, but thought I’d share what’s working for me. These are snippets you can just play with.

Variables 

$green: rgba(141,186,51,.7);
then later:
a {
color: $green;
 
&:hover {
          darken($green, 10%);
     }
}
Ok, that’s an example of nesting too! Haha.
Another variable:
$mobile: 767px;
then later:
@media (max-width: $mobile) {}
 or
@media (max-width: ($mobile - 1px)) {}

COMMENTS

Go buck wild on comments, sass compiling gets rid of them!
Why not show how your abstractions are used then?!
 
// <ol>
//     <li><a href=”/”>Home</a></li>
//     <li><a href=”/about/”>About</a></li>
//     <li><a href=”/about/us/”>About us</a></li>
// </ol>
 
.nav {
  list-style: none;
  margin-left: 0;
}
 
.nav li {
  display: inline;
}
 
.nav a {
  display: inline-block;
}

IMPORTS

@import isn’t the same “expensive” thing to load – it’s a gift that lets you work modularly. In the last project I did the style.css was only imports – it called in vars.scss, then other stuff like:

// Global Structure 
@import “partials/layout”;
 
// Modules 
@import “partials/module/forms”; // Forms & Gravity Forms 
@import “partials/module/contents”; // general content elements
COMPASS! 
This is like a side library. All you need to start using it:
@import “compass”; 
@import “compass/css3”;
then later:
.whatever, .whatever:hover {
     @include single-transition(all, 400ms, ease, 0);
}
This above is calling the CSS3 compass thing. It’s turning the transition there into all of the silly vendor prefixes! Nice huh?! Let robots do that.

MIXINS

The functions are kinda weird to wrap your head around, but I’m starting to get into it!!! I have a bunch of boxes that I want to get elements in different colours. So I wrote this mixin:
@mixin colorize($color) {
background:$color;
@include box-shadow(inset rgba(0,0,0,.06) .5em -.5em 0);
text-shadow:1px 2px $color;
::selection {
background:darken($color, 10%);
}
a {
color:darken($color, 20%);
}
a:hover {
background:darken($color, 20%);
color:#fff;
text-decoration: none;
}
&:hover {
background:darken($color, 4%);
@include box-shadow(inset rgba(0,0,0,.12) .7em -.9em 0);
}
}
then later I call the mixin like so:
.alpha.on > pop {
@include colorize($orange);
}
.beta.on > pop {
@include colorize($teal);
}
 
 Don’t mind the zany HTML ;)

STICK WITH IT!

Don’t tinker with the CSS after, do it in SASS. SCSS is beautiful because you can actually just do straight CSS there. If all you do is get Codekit to minify that’s still cool enough isn’t it?!
Now you have to tell me what’s awesome for you too ;)
And lastly the semi-intimidating stuff for the uninitiated:

Categorized in:

This post was written by ArleyM