Developing a responsive, Retina-friendly site (Part 2)

His examples are simple, meant to give you an idea of how sass/less work on a basic level. But I'm currently working on site that is several thousand lines of CSS, employing enormously complex css structures. Pseudo-selectors are in use everywhere. As are complex gradients, shadows, sprites...

It's imperative to have some sort of organization in your code. Working with really long class names or IDs isn't an option.

For instance, on this project, we have a defined color set of colours. The red we're using is #c03838. The blue is #2767d1. A shadow used throughout the site is 1px 1px 3px rgba(0,0,0,0.2), and one of the gradients (used in a few places) looks like this when written out fully: http://i.imgur.com/YZi3f0B.png

It wouldn't make sense to memorize those values/strings. Not only that, but it would become a pain in the ass to change them in specific places over dozens of iterations if that becomes necessary. Instead, if I define things like $headline-color and $highlight-color, I can refer back to those in my header file, and change them throughout the site simply.

In the case of complex selectors, it becomes vastly more simple. Not only is your style sheet organized analogously to your dom tree, but it's infinitely more flexible, and doesn't require duplicate writing in the case of long chains.

Less/sass are a huge boon to front end development because they help you manage complexity. That won't come through in simple examples, but it should be obvious if you've ever written a stylesheet more than a few hundred lines long.

   a.btn {
   &-primary,
   &-info,
   &-success,
   &-warning,
   &-danger {
   		&, &:link { color: #fff; }
   	}
   }

With LESS and SASS, you have a built-in capability to refactor things very quickly.

Nesting rules allow you to turn

  .foo p {
  }
  .foo p a {
  }
  .foo p div {
  }

  .foo {
     p {
        a {
        }
        div {
        }
     }
  }

'&' context reference allows you to turn this.

  .widget a.button { ... }
  .widget a.button:hover { ... }
  .widget a.button:active, .widget a.button:focus { ... }

  .widget a.button {
    ...
    &:hover { ... }
    &:focus, &:active { ... }
  }

@includes is like writing function. Which is very useful when you have to write browser-specific style. You can define `round-border` mixin once.

  @mixin round-border($radius) {
     border-radius: $radius;
     -moz-border-radius: $radius;
     -webkit-border-radius: $radius;
  }

  .dialog { 
    @include round-border(10px);
  }
  
  .color-picker { 
    @include round-border(5px);
  }

  .button { 
    @include round-border(3px);
    ...
  }

You could say the same objections to anything you don't know. CSS, HTML, JS whatever.

When you try to use it and understand it you will see why its useful. Or, if you still don't find it useful, you will at least have a reason, besides "I don't know it".

I assure it they are very useful. I use LESS.

You can use as little or as much of LESS as you want. A valid CSS file is also valid LESS (just uses 0% of it's features). You can start using some features as you learn it.

For a simple example, in order not to repeat 100 times a color, you can save it as a variable:

@main_color: #ddd;

then you can use it in rules like this:

blockquote { color: @main_color; }

.logo { border: 1px solid @main_color; }

So changing all the colors in a site it's as easy as changing ONE line, not hunting for #ddd; everywhere.

Basically, LESS is to a CSS file, what a CSS file is to setting things directly on the style attribute of each element.

You wouldn't style each element directly on the page, right? You'd use a referenced CSS stylesheet. Well, for the same --or very similar-- reasons, I wouldn't use a mere CSS file anymore.