LESS Joomlassa, artikkelin käännös

Alkuperäinen artikkeli löytyy osoitteesta: magazine.joomla.org/issues/issue-mar-2013/item/1121-do-less-in-joomla

LESS Joomlassa

Yksi Joomla! 3:n uusista ominaisuuksista on LESS. Monet ovat siitä ja sen käyttötavoista kuulleet, mutta niille, jotka eivät vielä ole tai kaipaavat muistinvirkistystä alla on lyhyt katsaus sen hyötyihin ja käyttöön.

LESS on dynaaminen tyylisivukokonaisuus. LESS:in sisäistäminen saattaa helpottua, jos kuvittelet sen samankaltaisena kuin PHP. Samaan tapaan kuin PHP tulkitaan serverin kautta ja tuottaa ulos vastaavaa arvioitua HTML:ää, LESS tulkitaan serverin kautta ja tuottaa ulos vastaavaa CSS:ää. Niin yksinkertaista se on.

Tarkemmin sanoen LESS laajentaa CSS:ää monipuoliselle valikoimalla lisäominaisuuksia. Tämä artikkeli keskittyy niistä kolmeen: muuttujat, mixinit ja funktiot.


Muuttujat

LESSin avulla voit määrittää tietyn joukon muuttujia, joita voidaan uudelleen käyttää kaikkialla tyylisivullasi. Alla määritämme kolme muuttujaa, jonka jälkeen näytämme miten niitä käytetään kaikkialla sivupohjassa.

@primary : #336699;
@secondary : #444444;
@bordercolor : #d5d4d4;

Kun nämä muuttujat on määritelty, voidaan niitä käyttää missä vain myöhemmin.

a.readon
{
color: @secondary;
}
h1
{
color: @primary;
border: 1px solid @bordercolor;
}

Kun serveri lukee koodin se tuottaa CSS-koodia muodossa, jossa sen odottaisitkin näkeväsi.
Se ei ole tämän monimutkaisempaa. Tämä vaatimaton esimerkki ei välttämättä tuo riittävän hyvin esille, kuinka hyödyllinen ja aikaa säästävä tämä ominaisuus on. Kun sitä hyödyntää suureen, satoja rivejä koodia sisältävään sivupohjaan, on uskomattoman helppoa muuttaa tyyliä vaihtamalla vain yhtä muuttujaa tiedoston alussa.


Mixinit

Tämä on hienostunut tapa sanoa, että voit lisätä täyden erän tyylejä tyylin sisään. Se on omalla tavallaan hyvin samantapainen kuin muuttujat, mutta yksittäisen arvon muuttamisen sijaan lisäämme nyt kokonaisia tyylejä. Alla esimerkki tästä tekniikasta:

.thinborder(@radius: 5px, @color: #d5d4d4, @width: 1px)
{
border: @width solid @color;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}


Tätä voidaan käyttää esimerkiksi näin:

.moduletable {
.thinborder(2px,#336699);
}

Kuten tulet huomaamaan voit muuttaa parametreista joko kaikki, tai et mitään. Jokainen määrittelemätön parametri käyttää oletusarvoa (yläpuolisessa esimerkissä leveyden oletusarvo on 1 pikseli). Tämä mahdollistaa erinomaisen tavan ylläpitää tyylisivua ilman järkyttävää määrää ylimääräisiä tyylirivejä.


Funktiot

Viimeinen ominaisuus, jota katsastelemme, ovat funktiot LESS:ssä. LESS-funktiot mahdollistavat yksinkertaiset toiminnot muuttujille. Voimme käyttää kertomista, jakamista, lisäämistä ja vähentämistä. Tämä on hyvin tehokas tapa luoda yksittäinen tyyli ja käyttää tätä tyyliä helposti koko tyylisivulla, menettämättä kykyä muokata tyylejä ainutlaatuisia tilanteita vastaavaksi.

Esimerkkinä:

//Define variables
@borderwidth : 2px;
@background : #222222;


.moduletable {
background-color: (@background / 4);
border: (@borderwidth + 1) solid (@background * 2);
}

Luomalla tämän tyylin ja lisäämälle LESS-funktionaaliteetin erityisiin kohtiin voimme luoda standardoituja tyylejä koko tyylisivun laajuudelle, pystyen edelleen muokkaamaan yksittäisiä tyylejä tilanteen sitä vaatiessa.

Yläpuolisessa esimerkissä asetamme oletustaustavärin, josta teemme muunnoksia tarvittaessa. Tässä nimenomaisessa esimerkissä käytämme taustan väriä pohjana muunneltuna sekä reunojen, että taustan väriksi.
L
ESS:ille on paljonkin muita käyttötapoja, mutta pitääkseni artikkelin pituuden siedettävänä en nyt keskity niihin sen tarkemmin, vaan katsomme pikaisesti miten LESS:iä voidaan käyttää Joomlan sivupohjassa. Jos sinulla on kysyttävää LESSistä voit käydä sen virallisella sivulla, lesscss.org .


LESS Joomlan sivupohjassa

Joomla! 3 sisältää JUI-kirjaston juurimediahakemistossaan. Tämä hakemisto sisältää kaikki käytettävissä olevat LESS:in ydintiedostot. Joomla-sivupohjat voivat käyttää näitä tiedostoja tuomalla (import) ne sivupohjan erityisiin LESS-tiedostoihin. Alla esimerkki:

// CSS Reset
@import "../../../media/jui/less/reset.less";
// Grid system and page structure
@import "../../../media/jui/less/scaffolding.less";
@import "../../../media/jui/less/grid.less";
@import "../../../media/jui/less/layouts.less";

// Base CSS
@import "../../../media/jui/less/type.less";
@import "../../../media/jui/less/code.less";
@import "../../../media/jui/less/forms.less";
@import "../../../media/jui/less/tables.less";

Lista kaikista tarjolla olevista tuotavista löytyy osoitteesta jui.kyleledbetter.com/

Kun olet tuonut ne LESS:in pohjaluokat, jotka haluat sivupohjaasi ja lisännyt omat LESS-tyylisi voit koostaa ne yhdeksi template.css-tiedostoksi, jonka avulla voit hallita koko sivustoasi yhtenäisellä tyylillä. Koostaaksesi LESS-tyylisi sinun pitää käyttää koostajaa (compiler) luodaksesi CSS-tiedoston. Älä anna koostamisen säikäyttää sinua, se on vain hienostunut tapa kutsua prosessia, jossa CSS-tiedostosta tuotetaan ulos LESS-tiedostoja ( muista, että kaikki ne muuttujat, mixinit ja funktiot pitää jäsentää ja kirjoittaa tavalliseen CSS-muotoon). Joomlan oletussivupohjat käyttävät pientä osaa Joomla-sovellusalustan sovelluksista luodakseen CSS:nsä .Tämä koodi on saatavilla kopioitavaksi ja käytettäväksi henkilökohtaisiin sivupohjatyyleihin GitHub-hakemistosta Joomla CMS:stä, osoite alla.

github.com/joomla/joomla-cms/blob/master/build/generatecss.php

Tämä tiedosto sisältää yksittäisen doExecute-toiminnon , joka ajamisensa jälkeen kirjoittaa CSS-tiedostot, pohjanaan Joomlan perusluokkaan (JLess). Aja se ja luo CSS:si ja upouusi sivupohjan tyylitiedostosi on toimintavalmis.


Lopuksi

Älä pelkää, että tämä prosessi olisi liian tekninen yleiseen käyttöön. Se on varsin helppo ymmärtää, ja yllätyt, kun saat selville kuinka helppoa se on ottaa käyttöön. Aloita LESS-tiedostojen kirjoittaminen jo tänään. Käytä hyväksesi JUI /LESS-kansioiden juuressa olevaa muotoilumahdollisuutta ja kirjota seuraava sivupohjasi LESS:in voimin.