10 good reasons why to learn a css meta language like sass or less

There’s a bunch of really usefull online css tools like css code shrinkers, validators,
sprite generators, px to em calculators just to name a few.
But what I like the
best is SASS and LESS.

Some years ago I started using SASS and LESS to
facilitate my CSS live.
I like the idea of variables, calculations of colors (15% brighter, please!)
of sizes (15px less than the default teaser div, please!), (parametric) mixins,
nested rules and a lot of other usefull stuff.

So back to the initial question: Why to learn a more complicated meta language
when CSS is such a simple thing?

That’s a simple one! It’s all about saving time, money and keep the code
quality high. Yes I’m talking about code quality for css files!

1. Mixins

Have you ever tried to make a simple, crossbrowser opacity declaration?

 

.opacity50 {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
  filter: alpha(opacity=50); /* IE 5-7 */
  -moz-opacity: 0.5; /* Netscape */
  -khtml-opacity: 0.5; /* Safari 1.x */
  opacity: 0.5; /* Regular browsers */
}

So next time you want to set the opacity of an element you simply copy these
7 lines and make some minor modifications manually, right?
Really? I mean … really?
Wouldn’t it be nice to declare some sort of crossbrowser function with just one
argument for opacity? Something like:

 .opacity(0.6); 

2. Nested code

Quiz question: Do you see the repetitive code?

#sitenav li.item a { display: block; }
#sitenav li.item a span { margin-left: 2em; }
#sitenav li.item a span em { text-decoration: underline; }

Just kidding ;) But wouldn’t it be nice to simply nest all these rules? Something
like:

#sitenav {
    li.item {
        a {
            display: block;
            span {
                margin-left: 2em;
                em {
                    text-decoration: underline;
                }
            }
        }
    }
}

3. Variables

You are tired of looking for this already defined dark red, right? "Ahh,
there it is. No, that’s a bit brighter than the color I’m looking for. Ah, here
it is .. no. Maybe I should check this other file". Does this sound familiar?
Welcome to the club! It could be so much easier by defining a simple color variable!
Maybe something like:

@red: #ab3312;
#teaserbox { 
	color: @red; 
}
[… some lines later…]
li.error {
	color: @red;
	border: 1px solir @red;
}

4. Calculations / Operations

Want to use the same background color as the given text color, but – let’s say
40% brighter and the border around it – #222 darker? Here it comes:

	
@red: #ab3312;

#footer {
    border: 1px solid (@red - #222); // Just make the border a bit brighter
    background: lighten(@red, 40%);  // Brighten the background even more
}

I’m talking about many things, Alberto already mentioned in an earlier blog
post some weeks ago. What about some best practises,
some fresh ideas to convince me learning less or sass?

OK. So, let’s continue with more pretentious LESS / SASS examples.

5. Conditions (SASS only)

Ever wanted to switch the background color depending on the text color?

/* Sample "if" statement */
@if lightness($color) < 50% {
  background-color: $brightBackgroundColor;
} @else {
  background-color: $darkBackgroundColor;
}

Tingly already? Let’s continue!

6. Scopes

As in many programming languages you can work with scopes. This means, there can
exist a global "red" and a red, which is only used in an element with
the id "page".
Let"s look at the following example taken from less‘
homepage

@var: red;	// The variable @var now contains red as global value

#page {
  @var: white; // Here, inside a #page, the @var is white, not red
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // This is outside the #page ... so the global "red" is applied
}

7. Loops (SASS only)

Ever thought about creating your own individual css grid layout. 14 Columns, 1450
pixels width with a 11px gap? Or what if you change to an 16px gap?
You can create your grid file on the fly. Change some variables and that’s it.

!gridUnit = 1.28571529 em
!numCols = 12

@for !i from 1 through !numCols
  .container_#{!numCols}
    .grid_#{!i}

Here you can see
the full example

8. Config files

What about reading the style guide and just writing down the guidelines line
by line into a configuration file?
This config file would be included once in every new CSS file and that’s it.
There’s no need to seek for the border-radius, the standard margin from top,…

An really good example is the boilerplate
of twitter.com. Let’s look at their configuration file:

@linkColor: #0069d6;
@linkColorHover: darken(@linkColor, 15);
@black: #000;
@grayDark: lighten(@black, 25%);
@green: #46a546;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;

// Baseline grid
@basefont: 13px;
@baseline: 18px;

// Griditude
// Modify the grid styles in mixins.less
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// Color Scheme
// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
@baseColor: @blue; // Set a base color
@complement: spin(@baseColor, 180); // Determine a complementary color
@split1: spin(@baseColor, 158); // Split complements
@split2: spin(@baseColor, -158);
@triad1: spin(@baseColor, 135); // Triads colors
[...]

9. Partial Files beeing combined into one large css file

A good practice is to split your less / sass files into parts. There can be the

• login.less
• profile.less
• photoalbum.less
• …

This is an easy to maintain structure even if you’re not the creator. "Reducing
the size of the gap between the photos. Hmmm, let’s open the photoalbum.less
file and change it!"
One single file including all needed parts is the trick here:

/home/designStar/styles/style.less:

@import "login.less";
@import "prpfie.less";
@import "photoalbum.less";

This will create one single file, containing all partials. You even can tell the
sass or less compiler to reduce the file size of this single file by removing all
unnecessary comments, whitespaces, and semicolons.

10. Javascript evaluation

Hm. I’m not sure if this scares you or if this is the point you open a text editor
in the background to start writing your own sass or less files :)
As less is based on javascript, you can do evil eval things by simply
wrapping the expression with back-ticks. Did I mention you don’t have to compile
less files when including a javascript snippet?

Combine these information and here it comes. The style from hell:

@var: <code>prompt("What's your favorite color?", "blue")</code>; // opens a prompt asking for the fav color

#infobox p {
    color: @var;
}

The paragraph inside the #infobox now uses the color entered by the user. Well well
– not a real live example…