OPTEN, das einzige Umbraco-zertifizierte Unternehmen der Schweiz

CSS-Horizonterweiterung dank LESS

Ich bin kein Fan von CSS. Nicht weil die Möglichkeiten beschränkt sind, sondern weil die Struktur und die Lesbarkeit nicht existieren. Klar gibt es Tricks bei der Strukturierung, doch da steige ich lieber auf LESS um. LESS kann nicht nur genial strukturiert werden, es bietet auch viele coole Funktionen.


Ich gebe Ihnen hier nur einen kleinen Vorgeschmack der LESS-Welt. Für eine komplette Übersicht und Erleuterung von LESS schauen Sie sich am besten die Dokumentation an.

www.lesscss.org

Strukturierung

Der grosse Vorteil von LESS sind die „Nested rules“. Durch die Verschachtelungen bleibt das File lesbar.

CSS

#header {
     color: black;
}
#header .navigation {
     font-size: 12px;
}
#header .logo {
     width: 300px;
}

LESS

#header {
    color: black;

    .navigation {
        font-size: 12px;
    }

    .logo {
        width: 300px;
    }
}

Das Ergebniss ist gleich.

Variablen

Mit LESS können Sie fast alles in eine Variable packen. So müssen Sie nicht immer wieder nachsehen welche Farbe jetzt die Schrift hat oder wie gross der Footer ist.

@color-red: #f33d3d
@footer-height: 250px;
#footer {
    height: @footer-height;
    background-color: @color-red;
}

Mixins

Schreiben Sie immer wieder die gleichen Anweisungen im CSS. Mit LESS können Sie sich die Zeit sparen.

Eingabe

.border-box() {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
    .border-box();
}

Ausgabe

.container {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Sie können auch einem Mixin Parameter mitgeben.

Eingabe

.transition(@duration, @ease) {
    -moz-transition: all @duration @ease;
    -o-transition: all @duration @ease;
    -webkit-transition: all @duration @ease;
    transition: all @duration @ease;
}

.button {
    .transition(500ms, ease-in);
}

Parent Selector

Ich liebe diese Funktion! (Der Code spricht für sich selbst)

Eingabe

.button {
    height: 20px;
    width: 250px;
    background-color: green;

    &.blue {
        background-color: blue;
    }

    &:hover {
        border: 1px solid red;
    }

    &-big {
        height: 50px;
        width: 250px;
    }

    #footer & {
        border-radius: 5px;
    }
}

Ausgabe

.button {
    height: 20px;
    width: 20px;
    background-color: green;
}

.button.blue {
    background-color: blue;
}

.button:hover {
    border: 1px solid red;
}

.button-big {
    height: 50px;
    width: 250px;
}

#footer .button {
    border-radius: 5px;
}

Nun wünsche ich Ihnen viel Vergnügen beim Ausprobieren und Zeitsparen.


kommentieren


0 Kommentar(e):