| VÄHEMMÄN | |
|---|---|
| Kieliluokka | Tyylitaulukkokieli , ilmainen ohjelmisto , esiprosessori ja funktiokirjasto |
| Esiintyi | 2009 |
| Tekijä | Alexis Sellier |
| Kehittäjä | Alexis Sellier, Dmitry Fadeev |
| Vapauta | 4.1.3 ( 9. kesäkuuta 2022 ) |
| Tyyppijärjestelmä | dynaaminen |
| Vaikutettu | CSS , Sass |
| vaikutti | Sass , Less Framework |
| Lisenssi | Apache-lisenssi 2 |
| Verkkosivusto | lesscss.org |
| OS | cross-platform |
LESS (Leaner Style Sheets, kompakti tyylisivu) on Alexis Sellierin kehittämä dynaaminen tyylikieli. Siihen vaikutti Sass -tyylinen kieli , ja se puolestaan vaikutti sen uuteen "SCSS"-syntaksiin, joka myös käyttää syntaksia, joka on CSS :n laajennus [1] .
LESS on avoimen lähdekoodin tuote . Sen ensimmäinen versio kirjoitettiin Rubylla , mutta myöhemmissä versioissa päätettiin luopua tämän ohjelmointikielen käytöstä JavaScriptin hyväksi . Less on sisäkkäinen metakieli : kelvollinen CSS olisi kelvollinen vähemmän ohjelma, jolla on samanlainen semantiikka .
LESS tarjoaa seuraavat CSS-laajennukset: muuttujat , sisäkkäiset lohkot , mixins , operaattorit ja funktiot [2] .
LESS voi suorittaa asiakaspuolen ( Internet Explorer 6+ , WebKit , Firefox ) tai palvelinpuolen , jossa on Node.js tai Rhino [2] .
Vähemmän avulla voit käyttää muuttujia. Muuttujan nimeä edeltää @ -symboli . Tehtävämerkkinä käytetään kaksoispistettä (:) .
Käännettäessä muuttujan arvo korvataan tuloksena olevaan CSS-dokumenttiin [2] .
@ väri : # 4D926F ; # header { color : @ color ; } h2 { väri : @ väri ; }Tämä VÄHEMMÄN koodi käännetään seuraavaan CSS-tiedostoon:
# header { color : #4D926F ; } h2 { väri : #4D926F ; }Mixiinien avulla voit sisällyttää kokonaisen joukon ominaisuuksia yhdestä sääntöjoukosta toiseen sisällyttämällä luokan nimen yhdeksi toisen luokan ominaisuuksista. Tätä käyttäytymistä voidaan pitää eräänlaisena vakiona tai muuttujana. Ne voivat myös käyttäytyä funktiona ottamalla argumentteja. Puhtaassa CSS:ssä toistuva koodi tulee toistaa useissa paikoissa - mixinit tekevät koodista puhtaamman, selkeämmän ja helpommin vaihdettavan [2] .
. pyöristetyt kulmat ( @ radius : 4px ) { -webkit-border-radius : @ radius ; -moz-border-radius : @ radius ; border-radius : @ radius ; } # header { .rounded-corners ; } # alatunniste { .rounded-corners(10px) ; }Tämä VÄHEMMÄN koodi käännetään seuraavaan CSS-tiedostoon:
# header { -webkit- border-radius : 4 px ; -moz- rajan säde : 4 px ; reuna - säde : 4px } # alatunniste { -webkit- border-radius : 10 px ; -moz- rajan säde : 10 px ; reunus - säde : 10 kuvapistettä }LESS mahdollistaa määritelmien sisäkkäisyyden kaskadoinnin sijaan tai sen mukana. Oletetaan esimerkiksi, että meillä on tämä CSS: CSS tukee loogista peräkkäistä käyttöä, mutta yhtä koodilohkoa ei voida sisäkkäin toisen sisällä. Vähemmän avulla voit sijoittaa valitsimen toiseen. Tämä tekee perinnöstä selkeämmän ja lyhentää tyylisivuja [2] .
# header { h1 { font-size : 26 px ; fontin paino : lihavoitu ; } p { font-size : 12 px ; a { tekstikoristelu : ei mitään ; &:hover { border -width : 1px } } } }Tämä VÄHEMMÄN koodi käännetään seuraavaan CSS-tiedostoon:
# header h1 { font-size : 26 px ; fontin paino : lihavoitu ; } # header p { font-size : 12 px ; } # header p a { text-decoration : none ; } # header p a : hover { border-width : 1 px ; }Vähemmän avulla voit käyttää toimintoja ja toimintoja. Toimintojen avulla voit lisätä, vähentää, jakaa ja kertoa ominaisuus- ja väriarvoja, joita voidaan käyttää monimutkaisten suhteiden luomiseen ominaisuuksien välille. Funktiot yhdistetään yksitellen JavaScript-koodiin, mikä mahdollistaa arvojen käsittelyn.
@ the-border : 1px ; @ perusväri : # 111 ; @ punainen : # 842210 ; # header { color : @ base-color * 3 ; border-left : @ the-border ; border-right : @ the-border * 2 ; } # alatunniste { väri : @ perusväri + #003300 ; reunaväri : desaturate ( @ punainen , 10 % ); }Tämä VÄHEMMÄN koodi käännetään seuraavaan CSS-tiedostoon:
# header { color : #333 ; reuna - vasen : 1px reuna - oikea : 2px } # alatunniste { väri : #114411 ; border-color : #7d2717 ; }Sekä Sass että LESS ovat CSS-esiprosessoreita, joiden avulla voit kirjoittaa puhdasta CSS:ää ohjelmointikonstruktioiden avulla staattisten sääntöjen sijaan [3] .
LESS on saanut inspiraationsa Sassista [4] . Sass on suunniteltu sekä yksinkertaistamaan että laajentamaan CSS:ää, kiharat aaltosulut poistettiin syntaksista ensimmäisissä versioissa (tätä syntaksia kutsutaan sassiksi ). LESS on suunniteltu mahdollisimman lähelle CSS:ää, joten niillä on sama syntaksi. Tämän seurauksena olemassa olevaa CSS:ää voidaan käyttää VÄHEMMÄN koodina. Sassin uudemmat versiot sisältävät myös CSS:n kaltaisen syntaksin nimeltä SCSS (Sassy CSS) [1] .
Katso Sass/Less Comparison [5] yksityiskohtainen syntaksien vertailu .
ZUSS ( ZK User-interface Style Sheet) [6] on LESSin ideoihin perustuva muotoilukieli. Sillä on samanlainen syntaksi, paitsi että se on tarkoitettu käytettäväksi palvelinpuolella Java -ohjelmointikielen kanssa . Se ei käytä JavaScript-tulkkia ( Rhino ), mutta voit kutsua Java-menetelmiä suoraan.
LESSiä voidaan käyttää verkkosivustolla monin eri tavoin. Yksi vaihtoehto on yhdistää less.js JavaScript -tiedosto sen viralliselta sivustolta lesscss.org verkkosivulle, jotta koodi muunnetaan CSS:ksi lennossa selaimen avulla.
Tämä tehdään esimerkiksi käyttämällä seuraavaa html-koodia:
< link rel = "tyylitaulukko/vähemmän" type = "text/css" href = "tyylit.ilman" > < script src = "vähemmän.js" type = "teksti/javascript" ></ script >Jos käytät Rhinon palvelinpuolen JavaScriptiä tai node.js -tiedostoa , voit muuntaa .less-tiedostot .css-muotoon palvelinpuolella.
Lopuksi on olemassa kolmannen osapuolen kielen toteutuksia: esimerkiksi SimpLESS avoimen lähdekoodin kääntäjä Windowsille , Linuxille ja Mac OS X :lle [7] , .less{} - toteutus .NET-kehykselle [8] tai lessphp [9 ] ] , jonka avulla voit kääntää vähemmän tyylejä palvelinpuolella PHP - sivustoille.
| Tyylisivujen kielet ( vertaa , luettelo ) | |
|---|---|
| Tilat |
|
| Vakio | |
| ei-standardi |
|