[mddw]

I feel always a little lost when I read tutorials which use SASSy/LESSy CSS. Illustrating exemples with a preprocessor means lots of web developers won't be able to read you.

Moreover these developers are not in the hype bandwagon (or they would be able to read SASSy/LESSy/whatever fashionable now), so they may need the most the said tutorials.

[aaronbrethorst]

You should learn one of them. It'll make your life so much easier that it's not even funny. They're also really straightforward (for the most part).

So you know that Sass and Less allow you to nest rules, right? e.g.:

    .foo {
        p {
            // rules go here
        }
    }

translates into .foo p { rules go here }

Here are the examples from the article:

    &:hover { opacity: 1; }

The ampersand simply means 'I am applied in the context of whatever rule I happen to be in'. So, .home { &:hover { } } is equivalent to writing this normal CSS:

    .home:hover {
    }

@include is like #include in C. It literally includes the referenced content in the rules you're writing. That means that

    .home {
        @include bg-size(60px,auto);
    }

is including something that (inferring from the name, here) sets the background size for the element. Given the parameters, it probably expands into:

    .home {
        background-size: 60px auto;
    }

plus another rule for handling 2x images in Webkit.

This is a variable. Nuff said.

    $sprite_url_2x: "http://turbo.paulstamatiou.com/assets/[e-mail]";

make sense?

[CJefferson]

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 :)

[showerst]

I'd guess that it's not the actual idea of LESS/SASS that most people don't grok, it's the integration into their deployment workflow.

Since they don't use it every day due to setup woes, they can't easily read it fluently.

[michaelbuckbee]

It sounds kind of weird, but I'm actually really passionate about CSS pre-processors. Switching to LESS from plain CSS was one of the biggest and clearest productivity improvements I've ever made to my dev toolkit.

I was reluctant to try it as I feel like there are already so many moving configurable layers to my dev stack and all I could think was "I have this nice static css file here - I just include it and everything works" and the only real exposure I had had to LESS/SASS was exactly the same sort of context free dozen lines of mixin code that does something awesome in some blog post just like you are describing (which made it seem much more intimidating than it actually was).

Now here's the real kicker: I didn't realize that I already know how to code css in LESS. Since LESS is a superset of CSS you can take any CSS file (even one from an existing application) and put it through a LESS processor and get back a usable CSS file. This is awesome as it makes it possible to start using LESS in the middle of a project and it makes it very easy to slowly stop doing all of the soul crushing find+replace that takes forever working with CSS as you ramp up with LESS.

I'd really encourage you to give LESS (or SASS or whatever you find fashionable) a try - I think you'll like it. If you get stuck or need help shoot me an email (on my acct page).

[mnicole]

Compass' docs' code snippets have little tabs that allow you to switch between the SCSS and Sass syntaxes that I think would be great for people like you that need to see the CSS output. I wonder if anyone's made something like that (possibly with Stylus in addition to LESS), even though I agree with the sibling comment that suggests learning one (I prefer Sass).