Given I don't understand SASS and Less, you seem to have, in each case, replaced some CSS with something which is longer, and less easy to understand.
I am sure these is some extra magic you are not telling us, but given that you are assuming we don't know about SASS and Less, you are obviously missing something important :)
You're actually the one missing something important: complexity.
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.
On compilation, you'll end up with a final result somewhat like example 2 -- but you weren't forced to write your first-level selector over and over the whole time. Your code also resembles the structure logic much closer at write time.
It gets better, too. Let's say we wanted to define our buttons in the classic windows 95/98 style -- grey, with a 1px relief border. In the classic CSS style, using example 2 as a pattern, we'd have to do it this way, duplicating our definitions the whole way:
The resultant code will be almost exactly the same, but you just wrote a lot less to get there, and will have an easier time of modifying it in the future. You can see the massive benefit in both speed and organization this allows, especially on large projects.
This is actually a great argument. I'm almost convinced. However, in the second example, wouldn't it be better to just have a .scrollbar-frame > .button with all the styles and then just do class="button up" and class="button down"?
Yes, but this enables it to be reused in other contexts, where the names "up" and "down" would not make much sense, but you would like to have the same border style for some reason.
Plus, you could turn this into a mixin "function", with the actual colors of the states changed depending on where you include it.
So the way he writes it, you could have a green, blue, whatever version of those borders, with the same one line (plus a parameter), whereas in CSS you would have to do:
Where the & is replaced with the previous mark, so it would create a.btn-primary, a.btn-info. You might still argue that you could get close to the amount of characters with vanilla CSS, but as soon as you have to change small bits of this, you end up refactoring a lot of code.
With LESS and SASS, you have a built-in capability to refactor things very quickly.
In none of aaronbrethorst's examples were multiple terms put inside a single pair of { }. Now I can see the advantage, as (obviously) when writing CSS it is common to have a lot of repetition of the type this lets you reduce.
Now, I can see the purpose of LESS and SASS. Sometimes when explaining something to someone, the most useful feature can seem so obvious as to not need explaining.
If you use Firefox, I highly recommend ItsAllText. It lets me right click on a textarea and open the contents with my editor of choice. When I save the file, whatever I wrote is automatically copied back over to the textarea.
Bulk indentation is one of the main reasons I switch over to vim for editing web text.
I don't think he was going for a value pitch, just a brief intro. It's really difficult to judge the value of CSS preprocessors from one-line examples, since as you say they usually end up being longer. You would have to look at larger stylesheets to actually see where they shine. In other words, the benefit from preprocessors isn't constant, it's exponential. You trade off some added complexity for a much greater ability to organize, combine, and maintain the various parts of your stylesheets.
The brevity starts to come in once you begin to use multiple rules inside each nested context, and get into multiple levels of nesting. The point of the @includes (called "mixins") are that they might expand into something much more complicated. Imagine a gradient mixin that expands into all the vendor-specific gradients with the correct syntax.
>Given I don't understand SASS and Less, you seem to have, in each case, replaced some CSS with something which is longer, and less easy to understand.
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.
I am sure these is some extra magic you are not telling us, but given that you are assuming we don't know about SASS and Less, you are obviously missing something important :)