LESS CSS - Aloittelijan opas
CSS-esiprosessori on nyt tullut web-kehityksessä. Se lähettää tavallista CSS: ää ohjelmoinnin ominaisuuksilla, kuten muuttujilla, toiminnoilla tai Mixinillä ja toiminnolla, joiden avulla web-kehittäjät voivat rakentaa modulaariset, skaalautuvat ja helpommin hallittavat CSS-tyylit.
Tässä tehtävässä aiomme tarkastella LESSiä, joka on ollut yksi suosituimmista CSS-esiprosessoreista, ja sitä on myös käytetty laajalti useissa front-end-kehyksissä, kuten Bootstrapissa. Käymme myös läpi perustyökaluja, työkaluja ja asetuksia, joiden avulla pääset käyttämään ja toimimaan LESSin avulla.
Kääntäjä
Ensinnäkin meidän on asennettava kääntäjä. LESS-syntaksi on ei-standardi W3C-eritelmän mukaan. Selain ei pysty käsittelemään ja tuottamaan tuotosta huolimatta CSS: n kaltaisista ominaisuuksista.
Tässä on vilkaisu LESS-koodiin:
@ väri-pohja: # 2d5e8b; .class1 taustaväri: @ väri-pohja; .class2 taustaväri: #fff; väri: @ väri-pohja;
Kääntäjä käsittelee koodin ja kääntää LESS-syntaksin selaimella yhteensopivaksi CSS-muotoksi:
.class1 taustaväri: # 2d5e8b; .luokka1 .luokka2 taustaväri: #fff; väri: # 2d5e8b;
CSS: n kokoamiseen on olemassa useita työkaluja:
JavaScriptin käyttäminen
LESS tulee a less.js tiedosto, joka on todella helppo käyttää sivustossasi. Luo tyylitaulukko .Vähemmän Laajenna ja linkitä se asiakirjaan rel = "stylesheet / vähemmän" ominaisuus.
Voit saada JS-tiedoston täältä, lataa se Bower-paketinhallinnan kautta, muuten suoraan CDN: hen, kuten näin:
Olet kaikki asettanut ja pystyvät luomaan tyylit .Vähemmän. LESS-syntaksi kootaan lennolla sivulatauksena. Pidä mielessä, että JavaScriptin käyttö on lannistunut tuotantovaiheessa, koska se vaikuttaa haitallisesti verkkosivuston suorituskykyyn.
Sinun pitäisi aina kääntää LESS-syntaksia etukäteen ja vain palvella säännöllistä CSS: ää sen sijaan. Voit käyttää terminaali, Task Runner pidät Murahdus tai Kulaus, tai graafinen sovellus.
CLI: n käyttö
LESS tarjoaa natiivin komentoriviliittymän (CLI), lessc, joka käsittelee useita tehtäviä pelkästään LESS-syntaksin kokoamisen jälkeen. CLI: n avulla voimme tuhota koodit, pakata tiedostot ja luoda lähdekartan. Komento perustuu Node.js-ohjelmaan, jonka avulla komento toimii tehokkaasti Windowsissa, OS X: ssä ja Linuxissa.
Varmista, että Node.js on asennettu (muuten kiinnitä asennusohjelma täältä) ja asenna sitten LESS CLI NPM: n kautta (solmupakettien hallinta) seuraavalla komentorivillä.
npm asenna -g vähemmän
Nyt sinulla on lessc komennolla LESS kootaan CSS: ksi:
lessc style.less style.css
Task Runnerin käyttäminen
Tehtäväjuoksu on työkalu, joka automatisoi kehitystehtävät ja työnkulut. Sen sijaan, että suorittaisit lessc komento joka kerta, kun haluaisimme koota koodit, voimme asentaa asennuskanavan ja asettaa sen katsomaan muutoksia LESS-tiedostoissamme ja kääntämään välittömästi LESS-koodin CSS: ään.
Tähän luokkaan kuuluvat kaksi suosituinta työkalua ovat Grunt ja Gulp. Meillä on joukko viestejä, jotka kattavat nämä työkalut. Tarkista, kuinka voit käyttää näitä työkaluja työnkulkuun.
- Gruntin käyttäminen työnkulun automatisoimiseksi
- Aloittaminen Gulp.js: n avulla
- Rakennusskriptien taistelu: Gulp Vs Grunt
Graafisen sovelluksen käyttäminen
Niille, jotka eivät ehkä ole tottuneet käyttämään terminaali- ja komentoriviä, he voivat valita graafisen käyttöliittymän. On olemassa runsaasti hakemuksia LESS-tietokannan kokoamiseksi kaikille alustoille - jotkut ilmaiseksi, jotkut maksetaan
Tässä on täydellinen luettelo:
| Sovellus | foorumi | Kustannus |
| seos | OS X / Windows | Vapaa |
| Koala | OS X / Windows / Linux | Vapaa |
| Prepros | OS X / Windows | Freemium (USD29) |
| winless | Windows | Vapaa |
| CodeKit | OS X | USD32 |
Mikä kääntäjä, jonka valitset (JavaScriptin ohella), ei oikeastaan ole väliä, rehellisesti sanottuna niin kauan kuin työkalu toimii ja täydentää työnkulkua..
Koodieditori
Voit käyttää mitä tahansa koodieditoria. Yksinkertaisesti asenna laajennus tai laajennus, kun haluat korostaa LESS-syntaksia, jossa on oikeat värit. Tämä ominaisuus on nyt saatavilla lähes kaikille koodinmuokkaajille ja IDE: ille, mukaan lukien SublimeText, Notepad ++, VisualStudio, TextMate ja Eclipse..
Nyt kun meillä on kaikki kääntäjä ja koodieditori, voimme aloittaa kirjoittamalla CSS-tyylit LESS-syntaksilla.
LESS Syntax
Toisin kuin tavallinen CSS, kuten tiedämme, LESS toimii paljon enemmän kuin ohjelmointikieli. Se on dynaaminen, joten odota löytävänsä joitakin termejä muuttujat, Operaatio ja laajuus matkan varrella.
muuttujat
Ensinnäkin, katsotaanpa muuttujat.
Jos olet työskennellyt melko jonkin aikaa CSS: n kanssa, olet luultavasti kirjoittanut jotain tällaista, jossa meillä on toistuvasti arvoja, jotka on annettu koko lohkojen deklarointilohkoihin.
.class1 taustaväri: # 2d5e8b; .class2 taustaväri: #fff; väri: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Tämä käytäntö on oikeastaan hieno - kunnes löydämme, että meidän on selattava yli tuhat tai useampia samanlaisia katkelmia koko tyylitaulukossa. Tämä voi tapahtua, kun rakennetaan laajamittainen verkkosivusto. Työstä tulee tylsiä.
Jos käytämme sellaista CSS-esiprosessoria kuin LESS, yllä oleva esimerkki ei olisi ongelma - voimme käyttää muuttujat. Muuttujat antavat meille mahdollisuuden tallentaa vakio arvo, jota myöhemmin voidaan käyttää uudelleen koko tyylitaulukossa.
@ väri-pohja: # 2d5e8b; .class1 taustaväri: @ väri-pohja; .class2 taustaväri: #fff; väri: @ väri-pohja; .class3 border: 1px solid @ color-base;
Yllä olevassa esimerkissä säilytämme värin # 2d5e8b vuonna @ Väri-base muuttuja. Kun haluat muuttaa väriä, meidän on muutettava vain tämän muuttujan arvoa.
Värin lisäksi voit myös asettaa muita arvoja muuttujiin, kuten esimerkiksi:
@ font-family: Georgia @ dot-border: dotted @transition: lineaarinen @opacity: 0.5
Mixins
LESSissä voimme käyttää Mixins käyttää uudelleen koko ilmoituksia CSS-säännössä, joka on määritetty toisessa säännösjoukossa. Tässä on esimerkki:
.kaltevuudet tausta: #eaeaea; tausta: lineaarinen gradientti (alkuun, #eaeaea, #cccccc); tausta: -o-lineaarinen gradientti (alkuun, #eaeaea, #ccccccc); tausta: -ms-lineaarinen gradientti (alkuun, #eaeaea, #cccccc); tausta: -moz-lineaarinen gradientti (alkuun, #eaeaea, #ccccccc); tausta: -webkit-lineaarinen gradientti (alkuun, #eaeaea, #cccccc);
Yllä olevassa katkelmassa olemme olleet oletusarvoisia kaltevuus värin sisällä .kaltevuudet luokka. Aina kun haluamme lisätä kaltevuudet, lisää vain .kaltevuudet tällä tavalla:
div .gradients; raja: 1px kiinteä # 555; raja-säde: 3px;
.laatikko perii kaikki ilmoituslohkon .kaltevuudet. Yllä oleva CSS-sääntö on siis sama kuin seuraava tavallinen CSS:
div tausta: #eaeaea; tausta: lineaarinen gradientti (alkuun, #eaeaea, #cccccc); tausta: -o-lineaarinen gradientti (alkuun, #eaeaea, #ccccccc); tausta: -ms-lineaarinen gradientti (alkuun, #eaeaea, #cccccc); tausta: -moz-lineaarinen gradientti (alkuun, #eaeaea, #ccccccc); tausta: -webkit-lineaarinen gradientti (alkuun, #eaeaea, #cccccc); raja: 1px kiinteä # 555; raja-säde: 3px;
Lisäksi jos käytät paljon CSS3-sivustoa sivustossasi, voit käyttää LESS Elements -ohjelmaa helpottamaan työtäsi. LESS Elements on yleinen kokoelma CSS3-sekoittimet että käytämme usein tyylitaulukoissa, kuten border-säde, kaltevuudet, drop-varjo ja niin edelleen.
Voit käyttää LESS Elements -ohjelmaa yksinkertaisesti lisäämällä @tuonti sääntö LESS-tyylitaulukkosi, mutta älä unohda ladata sitä ensin ja lisätä sen työhakemistoon.
@import "elements.less";
Nyt voimme käyttää uudelleen kaikkia luokat tarjotaan elements.less, esimerkiksi lisätä 3px rajan säde a div, voimme kirjoittaa:
div .rounded (3px);
Lisätietoja on virallisissa asiakirjoissa.
Sisäkkäiset säännöt
Kun kirjoitat tyylit tavallisessa CSS: ssä, saatat olla myös tullut läpi nämä tyypilliset koodirakenteet.
nav korkeus: 40px; leveys: 100%; tausta: # 455868; reunapohja: 2px kiinteä # 283744; nav li leveys: 600px; korkeus: 40px; nav li a väri: #fff; linjan korkeus: 40px; teksti-varjo: 1px 1px 0px # 283744;
Tavallisessa CSS: ssä valitsemme lapsielementit kohdistamalla ensin vanhempaan jokaisessa sääntöjoukossa, mikä on huomattavasti tarpeeton, jos seuraamme “parhaat käytännöt” periaate.
LESS CSS: ssä voidaan yksinkertaistaa sääntöjä lapsen elementtien pesiminen vanhempien sisällä, seuraavasti;
nav korkeus: 40px; leveys: 100%; tausta: # 455868; reunapohja: 2px kiinteä # 283744; li leveys: 600px; korkeus: 40px; a väri: #fff; linjan korkeus: 40px; teksti-varjo: 1px 1px 0px # 283744;
Voit myös määrittää näennäisluokkia, Kuten : hover, valintakiekkoa käyttämällä symbolia (ja).
Sanotaan, että haluamme lisätä : hover yllä olevaan ankkuritunnisteeseen, voimme kirjoittaa sen tällä tavalla:
a väri: #fff; linjan korkeus: 40px; teksti-varjo: 1px 1px 0px # 283744; &: hover taustaväri: # 000; väri: #fff;
Operaatio
Voimme myös toimia LESSissä, kuten lisääminen, vähentäminen, kertolasku ja jakaminen numeroiden, värien ja muuttujien mukaan.
Oletetaan, että haluamme, että elementti B on kaksi kertaa suurempi kuin elementti A. Tässä tapauksessa voimme kirjoittaa sen tällä tavalla:
@height: 100px .element-A korkeus: @height; .elementti-B korkeus: @heikko * 2;
Kuten edellä näet, tallennamme ensin arvon @korkeus muuttuja, määritä sitten arvo elementille A.
Elementissä B ei itse lasketa korkeutta, voimme kertoa korkeuden 2: lla käyttämällä tähtioperaattoria (*). Nyt kun muutamme arvoa @korkeus muuttuja, elementti B on aina kaksinkertainen korkeus.
Tutustu edistyneempiin käyttöesimerkkeihin edellisessä opetusohjelmassa: Slick Menu Navigation Barin suunnittelu.
laajuus
LESS soveltaa laajuus käsite, jossa muuttujat peritään ensin paikallisesta laajuudesta, ja kun se ei ole saatavilla paikallisesti, se etsii laajemman soveltamisalan.
otsikko @color: black; taustaväri: @color; nav @color: sininen; taustaväri: @color; a väri: @color;
Edellä olevassa esimerkissä ylätunniste on a musta taustaväri, mutta navtaustaväri on sininen koska sillä on @color-muuttuja paikallisessa laajuudessaan, kun taas on myös sininen, joka on peritty lähimmästä vanhemmastaan, nav.
Lopullinen ajatus
Loppujen lopuksi toivomme, että tämä viesti voi antaa sinulle perustavanlaatuisen käsityksen siitä, miten voimme kirjoittaa CSS: ää paremmin käyttämällä LESSiä. Aluksi tuntuu hieman hankalalta, mutta kun yrität sitä useammin, siitä tulee varmasti paljon helpompaa.
Seuraavassa on muutamia opetusohjelmia, joita kehotan teitä tutkimaan lisää vinkkejä ja käytäntöjä, jotka voivat auttaa LESS-taitojasi seuraavalle tasolle.
- LESS CSS -opetusohjelma: Slick-valikon navigointipalkin suunnittelu
- LESS-väritoimintojen ymmärtäminen
- 3 Uudet LESS CSS -ominaisuudet, joita sinun pitäisi tietää
