{less} - CSS

Att konstruera och underhålla CSS-strukturer och instruktioner för större sajter kan vara nog så tidskrävande. CSS-dokumentationen i sig själv ger inget eget stöd för variabler. Detta leder ofta till att man måste ange samma CSS-värden upprepade gånger i ett CSS-dokument.

Men det finns hjälp att tillgå, låt oss ta en titt på det dynamiska CSS-språket {less} som genom förkompilering ger oss möjlighet att använda variables, mixins, operations och functions.

Ange variabler som du kan återanvända

// instruktion i less
@color: #4D926F;
#header {color: @color;}
h2 {color: @color;}

/* kompilerat CSS-resultat */
#header {color: #4D926F;}
h2 {color: #4D926F;}

Mixins, inbäddning av css värden:

// instruktion i less
.rounded-corners (@radius: 5px) {
    border-radius:@radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}
 
#header {.rounded-corners}
#footer {.rounded-corners(10px)}

/* kompilerat CSS-resultat */
#header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
 
#footer {
     border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

Nästlade regler

// instruktion i less
#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

/*kompilerat CSS Resultat*/
#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {font-size: 12px;}
#header p a {text-decoration: none;}
#header p a:hover {border-width: 1px;}

Operations and functions

Att hantera relativa fontstorlekar i procent beräknat utifrån pixlar är ett vanligt case. Vi utgår från en basstorlek på 13px och skapar en funktion som returnerar ett procenttal utifrån önskad pixel- och basstorlek:

// instruktion i less
@basefontsize: 13;
 
.fontresizer(@fontsize: 13px)  {
    font-size: percentage(@fontsize/@basefontsize);
}
.classx { .fontresizer(); }

/*kompilerat CSS-resultat*/
.classx{ font-size: 100%;}

Låt oss nu använda funktionen:

// instruktion i less
.classx{ .fontresizer(20px);}

/* kompilerat CSS-resultat */
.classx{font-size: 153.846%;}

Ett annat vanligt förekommande behov är att reducera instruktioner för så kallade imagesprite-bakgrunder

// instruktion i less
.sprite(@offset-x: 0, @offset-y: 0) {
    background: url("../sprites/icons.png") scroll no-repeat @offset-x @offset-y;
}
.classx {.sprite(100%, -100px);
}

/*kompilerat CSS-resultat*/
.classx{ background: url("../sprites/icons.png") scroll no-repeat 100% -100px;}

Installera och använd {less}

{less} kan användas såväl från klienten (Chrome, Safari och Firefox för lokal utveckling) som från servern med Node.js och Rhino. Använder du Maven rekommenderar jag denna plugin för kompilering av {less}-resurser till CSS-filer.

Som Mac-användare kan du även använda {less}-appen från CodeKit i din lokala utvecklingsmiljö.