Sass Compass Blueprint

So I just realized that I hadn’t actually written anything about compass. Now I feel a little dumb about the title of the Formalize post but w.e shit happens. Anyway I’ll be talking about css in this post. I started using these a while back so I don’t really know why I haven’t posted anything about it. Better late than never.

Let’s start with SASS. Syntactically Awesome Style Sheet

well actually I’ll be talking about SCSS which is sass syntax which is more like css. Well actually it’s exactly like regular css except you can add way more stuff. but regular css is still valid scss. I’m not going to try to explain so here’s an example.

SCSS:

$mycolor: blue;

@mixin blue-bg($color) {
    background-color: $color;
}

div#test {
    width: 100px;
    height: 100px;
    @include blue-bg($mycolor);
    a {
        color: black;'
    }
}

Compiles into:

div#test {
    width: 100px;
    height: 100px;
    background-color: blue;
}
div#test a {
    color: black;
}

If you didn’t understand that then, well I don’t really care. The only reason I write these things is to procrastinate anyway. Actually I think I’ll cut off right here and continue later.

I said “Actually” too many times in this post. I wonder if I always do that … ? :S

Comments