developingidea

Gondolatok a LESS CSS-ről

A variációk egyszeri degradálásáról szól a fáma, ahol egy JavaScript (vagy PHP) segít értelmezni a szabványtól eltérően strukturált formázást.

Több ilyen megoldás közül választhatunk, nézzük meg a szintaxist az egyik legnépszerűbb CSS processzor példáján, a LESS-en keresztül:

@color: #b4bcbf; 
.rounded-corners (@radius: 5px) { 
    -webkit-border-radius: @radius; 
    -moz-border-radius: @radius; 
    border-radius: @radius; 
} 
.banner { 
    .rounded-corners; 
 
.footer { 
    .rounded-corners(10px); 
    a { 
        color: lighten(@color, 10%); 
    } 
}

Az előző így nézne ki normál CSS-ből:

.banner { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
.footer { 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
} 
.footer a { 
    color: #ccd5d9; 
} 

Fantasztikus, igaz?

Előnye a konstansok és változók használata, mely CSS specifikáció végleges változatán még dolgozik a W3C.

Egyszerűnek tűnik ugyan, azonban a megszokottól merőben eltérő gondolkodást igényel.
Könnyen elsajátítható, csupán mantrázás kérdése az egész, mégis a hagyományos CSS-t részesítem előnyben. Ha elvárás, akkor használom, viszont számomra gátolja a gyors és hatékony munkát az, amikor át kell állítani az agyam egy másik sémára.

FYL:

Mivel többször szeretnék majd kódrészletet megosztani, így a tagek színezése ficsőr is lesz majd.