Vor ein paar Wochen habe ich einen Artikel über die extrem nützliche preprocessing language SASS geschrieben. Möchte man sich die CSS-Arbeit mit einem Preprozessor erleichtern, hat man die Wahl zwischen den drei verschiedenen Syntaxen SASS, SCSS und LESS.

Da ich selbst von Anfang an auf SASS gesetzt habe, habe ich die anderen Schreibweisen in meinem Artikel etwas vernachlässigt, und will hier noch zwei, drei Sätze loswerden.

Vereinfacht kann man zusammenfassen:

SASS

hat durch den Wegfall von Semikolons und geschweiften Klammern die minimalistischste Schreibweise. Und es hat den größten Funktionsumgang, der mit entsprechenden Frameworks beliebig erweiterbar ist, braucht dafür aber mehr Einarbeitungszeit als die anderen Syntaxen.
Beispiel:

$border-radius: 4px

.col2
    padding: 20px + $border-radius
    +border-radius( $border-radius )
    img
        width: 100%

LESS

ist am einfachsten zu erlernen, hat jedoch weniger Funktionsumfang als SASS und ist nur bedingt erweiterbar.

@border-radius: 4px;

.col2 {
    padding: 20px + @border-radius;
    .border-radius( @border-radius );
    img {
        width: 100%;
    }
}

SCSS

ist wie SASS, mit dem unterschied, dass man die geschweiften klammern und semikolons wie bei CSS ausschreibt. Also ein Zwischenstück zwischen SASS und LESS.

$border-radius: 4px;

.col2 {
    padding: 20px + $border-radius;
    +border-radius( $border-radius );
    img {
        width: 100%;
    }
}

Fazit

Ich empfehle dir SASS zu nehmen. Wenn dir das für einen Einstieg zu kompliziert erscheint, Versuch's erstmal mit SCSS. Später von SCSS auf SASS umzuspringen wird für dich kein Problem sein.

Schau dir mal das Video-Tutorial von Chris Coyier dazu an. Er erklärt den Workflow mit CodeKit anhand von SCSS.