Programming CSS – Less/Sass

Twitter Bootstrap is the most popular and starred repository in github. It has been gaining a lot of momentum for the past year, and I have been both charmed and attracted to it ever since I discovered it. But this post is not about Bootstrap, but more of the idea that we could program CSS.

I never gave much thought about how Bootstrap works when I discovered it, but when I started using it more, the idea did occur to me to find out how are they doing it?

Bootstrap is developed on LESS , which is a dynamic stylesheet language. Interesting thing is that it was influenced by the SASS Language for CSS, which is developed in Ruby. And in proof of the fact that the world is very much a smaller place these days, LESS eventually influenced the SASS guys to create SCSS which has a more like-able syntax.

Sometimes the best ideas do come from your competitors, doesn’t it? And there is no shame in accepting that fact ! Web Development is always a thriving scene, and we have newer frameworks and techniques, thanks to all these folks who learn from each other, and try to create something better.

Both SASS & LESS Frameworks have many a common ideas, that all programmers are aware of, and used it to help developers program CSS. Some of the things are,

Variables

$ – SASS, @ – LESS
@red : #650000;
.error {
color : @red;
}

Mixins

@dirty : #878776;
.background(@bw : 2px) {
background-color: @dirty;
border: @bw;
}
.header {
.background
}

Nesting

#header {
h1 {
// Some Styles
}
p {
//Some font styles
}
}

Functions & Operations

@f-border: 1px;
@error: #AA0000;
#footer {
border: @f-border * 2;
border-color: desaturate(@error, 10%);
}

All the above code is supposed to be LESS, and SASS/SCSS differs in just the syntax. But SASS/SCSS also has support for Selector Inheritance.

Resources :

Advertisements

One thought on “Programming CSS – Less/Sass

Leave a Reply

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