| KEVÉSBÉ | |
|---|---|
| Nyelvóra | Stíluslap nyelv , ingyenes szoftver , előfeldolgozó és függvénytár |
| Megjelent | 2009 |
| Szerző | Alexis Sellier |
| Fejlesztő | Alexis Sellier, Dmitrij Fadejev |
| Kiadás | 4.1.3 ( 2022. június 9. ) |
| Típusrendszer | dinamikus |
| Befolyásolt | CSS , Sass |
| befolyásolta | Sass , Less Framework |
| Engedély | Apache licenc 2 |
| Weboldal | lesscss.org |
| OS | platformközi |
A LESS (Leaner Style Sheets, kompakt stíluslap) egy dinamikus stílusnyelv, amelyet Alexis Sellier fejlesztett ki. A Sass -stílusú nyelv befolyásolta, és az új "SCSS" szintaxist is, amely szintén a CSS kiterjesztése [1] szintaxisát használja .
A LESS nyílt forráskódú termék . Az első verziója Ruby nyelven íródott , de a későbbiekben úgy döntöttek, hogy felhagynak ennek a programozási nyelvnek a használatával, a JavaScript helyett . A Less egy beágyazott metanyelv : az érvényes CSS egy érvényes kevesebb program hasonló szemantikával .
A LESS a következő CSS-bővítményeket biztosítja: változók , beágyazott blokkok , mixins , operátorok és függvények [2] .
A LESS futtathatja a kliensoldalt ( Internet Explorer 6+ , WebKit , Firefox ) vagy a szerveroldalt, ahol Node.js vagy Rhino [2] .
A Less lehetővé teszi a változók használatát. A változó nevét a @ szimbólum előzi meg . A kettőspont (:) a hozzárendelés jele .
Fordításkor a változó értéke behelyettesítésre kerül a kapott CSS dokumentumba [2] .
@ szín : # 4D926F ; # header { color : @ color ; } h2 { szín : @ szín ; }Ez a KEVESEBB kód a következő CSS-fájlba lesz fordítva:
# header { color : #4D926F ; } h2 { szín : #4D926F ; }A mixinek lehetővé teszik, hogy az egyik szabálykészletből a másikba tulajdonságok egész halmazát beépítsd azáltal, hogy egy osztály nevét egy másik osztály tulajdonságai közé sorolod. Ez a viselkedés egyfajta állandónak vagy változónak tekinthető. Az argumentumok felvételével függvényként is viselkedhetnek. A tiszta CSS-ben az ismétlődő kódot több helyen meg kell ismételni – a mixinek tisztábbá, világosabbá és könnyebben megváltoztathatóvá teszik a kódot [2] .
. lekerekített sarkok ( @ radius : 4px ) { -webkit-border-radius : @ sugár ; -moz-border-radius : @ sugár ; border-radius : @ sugar ; } # header { .rounded-corners ; } # lábléc { .rounded-corners(10px) ; }Ez a KEVESEBB kód a következő CSS-fájlba lesz fordítva:
# header { -webkit- border-radius : 4 px ; -moz- border-radius : 4 px ; szegély - sugár : 4 képpont } # lábléc { -webkit- border-radius : 10 px ; -moz- border-radius : 10 px ; szegély - sugár : 10 képpont }A LESS lehetővé teszi a definíciók egymásba ágyazását a kaszkád helyett vagy azzal együtt. Tegyük fel például, hogy van ez a CSS: A CSS támogatja a logikai kaszkádolást, de az egyik kódblokk nem ágyazható be a másikba. A Less lehetővé teszi, hogy egy választót egymásba ágyazzon. Ez tisztábbá teszi az öröklődést és lerövidíti a stíluslapokat [2] .
# header { h1 { font-size : 26 px ; font-weight : félkövér ; } p { font-size : 12 px ; a { text-decoration : none ; &:hover { border -width : 1px } } } }Ez a KEVESEBB kód a következő CSS-fájlba lesz fordítva:
# header h1 { font-size : 26 px ; font-weight : félkövér ; } # fejléc p { font-size : 12 px ; } # header p a { text-decoration : none ; } # fejléc p a : hover { border-width : 1 px ; }A Less lehetővé teszi a műveletek és funkciók használatát. A műveletek lehetővé teszik tulajdonság- és színértékek összeadását, kivonását, elosztását és szorzását, amelyek segítségével összetett kapcsolatokat hozhatunk létre a tulajdonságok között. A függvények egyenként vannak leképezve a JavaScript kódra, lehetővé téve az értékek feldolgozását.
@ the-border : 1px ; @ alapszín : # 111 ; @ piros : # 842210 ; # header { color : @ alapszín * 3 ; border-left : @ the-border ; border-right : @ the-border * 2 ; } # lábléc { szín : @ alapszín + #003300 ; szegélyszín : deszaturate ( @ piros , 10 % ); }Ez a KEVESEBB kód a következő CSS-fájlba lesz fordítva:
# header { color : #333 ; szegély - bal : 1px szegély - jobb : 2px } # lábléc { szín : #114411 ; keretszín : # 7d2717 ; }Mind a Sass , mind a LESS CSS előfeldolgozó, amely lehetővé teszi, hogy statikus szabályok helyett programozási konstrukciók segítségével tiszta CSS-t írjunk [3] .
A LESS-t Sass ihlette [4] . A Sass-t a CSS egyszerűsítésére és kiterjesztésére tervezték, az első verziókban eltávolították a kapcsos zárójeleket a szintaxisból (ezt a szintaxist sass -nak hívják ). A LESS-t úgy tervezték, hogy a lehető legközelebb álljon a CSS-hez, ezért ugyanaz a szintaxisuk. Ennek eredményeként a meglévő CSS KEVESEBB kódként használható. A Sass újabb verziói is tartalmaznak egy CSS-szerű szintaxist, az SCSS-t (Sassy CSS) [1] .
Lásd a Sass/Less Comparison [5] című részt a részletes szintaxis-összehasonlításért .
A ZUSS ( ZK User-interface Style Sheet) [6] a LESS ötletein alapuló stílusnyelv. Hasonló szintaxissal rendelkezik, azzal a különbséggel, hogy a Java programozási nyelv mellett a szerver oldalon is használható . Nem használ JavaScript értelmezőt ( Rhino ), de lehetővé teszi a Java metódusok közvetlen meghívását.
A LESS többféleképpen használható egy weboldalon. Az egyik lehetőség az, hogy a lesscss.org hivatalos webhelyéről származó less.js JavaScript -fájlt csatlakoztatja a weboldalhoz, hogy a kódot menet közben CSS-vé konvertálja a böngésző segítségével.
Ez például a következő html kód használatával történik:
< link rel = "stylesheet/less" type = "text/css" href = "styles.less" > < script src = "less.js" type = "text/javascript" ></ script >Ha Rhino szerveroldali JavaScriptet vagy node.js -t használ , a .less fájlokat .css formátumba konvertálhatja a szerver oldalon.
Végül vannak a nyelv harmadik féltől származó implementációi is: például SimpLESS nyílt forráskódú fordító Windows , Linux és Mac OS X rendszerekhez [7] , .less{} – a .NET keretrendszer [8] vagy lessphp [9 ] megvalósítása. ] , amely lehetővé teszi, hogy kevesebb stílust fordítsunk le a szerver oldalon PHP - webhelyekhez.
| Stíluslap nyelvek ( hasonlítsa össze , list ) | |
|---|---|
| Módok |
|
| Alapértelmezett | |
| nem szabványos |
|