LESS CSS-opetusohjelma Slick-valikon navigointipalkin suunnittelu

Tämä artikkeli on osa meidän "HTML5 / CSS3-oppaiden sarja" - omistettu auttamaan sinua parantamaan suunnittelijaa ja / tai kehittäjää. Klikkaa tästä nähdä lisää saman sarjan artikkeleita.

Web-suunnittelu ja kehitysmaailma kehittyvät todella nopeasti. Näemme tämän suuressa määrässä uusia asioita, jotka on julkaistu yhteisössä (lähes) jokapäiväisessä, olipa sovellukset tai uudet kehykset, jotka auttavat tekemään päivittäisestä työstämme web-suunnittelijoina tai kehittäjinä tehokkaampia ja tehokkaampia.

Yksi, joka kiinnitti huomioni web-suunnittelun kehittymisestä tänään, on LESS, ohjelmoitava tyylitaulukon kieli, joka laajentaa tapaa kirjoittaa CSS-syntaksia yhdistämällä joitakin ohjelmointikonsepteja, kuten muuttujia, sekoittimia, toimintoja ja operaatioita.

Se avaa uusia ominaisuuksia CSS-syntaksin kirjoittamisessa. Esimerkiksi soveltamalla Mixinsia CSS: ssä, kuten me teemme ohjelmassa, voimme nyt tallentaa oletustyylejä ja -arvoja, joita voidaan käyttää koko tiedostossa aina kun se on mahdollista. Tämän vuoksi meidän ei tarvitse kirjoittaa samoja tyylejä uudestaan ​​ja uudestaan.

No, tehdään joitakin harjoituksia LESSin kanssa saadaksesi paremman käsityksen siitä, mitä se tarjoaa.

Suunnittelu LESSillä

Tässä opetusohjelmassa yritämme suunnitella liukas valikkonavigointipalkin, joka on inspiroitu Apple.com-sivustosta. Koska alkuperäinen tuote on vain innoittamana, huomaa, että lopullinen opetusohjelma ei ole täsmälleen sama kuin alkuperäinen.

Aloittaaksesi kannattaa ensin lukea seuraavat hyödylliset resurssit. Ne selittävät joitakin LESS-kielen perustietoja, jotka auttavat sinua ennen kuin jatkat tämän oppaan.

• LESS on enemmän: Tee CSS-koodauksesi helpommaksi LESS-toiminnolla
• Kirjoita parempi CSS vähemmän
• Johdatus LESSiin ja vertailu Sassiin

Valmistautuminen

Ensinnäkin tässä pienessä hankkeessa tarvitaan joitakin keskeisiä asioita:

1. LESS Tekstieditori

Tarvitsemme tekstieditorin navigointivalikon koodittamiseksi. Useimmat nykyään markkinoilla olevat tekstieditorit (kuten Dreamweaver, Notepad ++, InType, Sublime Text 2) eivät kuitenkaan ole vielä tukeneet .Vähemmän tiedostolaajennukset oletusarvoisesti, joten syntaksia ei ehkä korosteta hyvin.

Joten tässä opetusohjelmassa käytämme erityistä tekstieditoria LESS: lle nimeltä ChrunchApp. Voimme avata ja muokata .Vähemmän tiedostot ja koota se staattiseksi CSS: ksi tämän sovelluksen avulla. Koska se on Adobe Air -sovellus, se voidaan asentaa kaikkiin suurimpiin työpöydän käyttöjärjestelmiin (Win, OSX ja Linux).

HTML-editorissa voit käyttää mitä tahansa editoria, jota käytät jo nyt. Pidän henkilökohtaisesti Sublime Text 2: sta.

2. Less.js

Lataa sitten LESS JavaScript -kirjasto viralliselta verkkosivustolta, nykyinen versio on 1.2.1. Aseta se harjoituskansiisi tähän.

Liitä tiedosto sitten HTML-dokumenttiin.

3. Prefiksitön

Käytämme myös muutamia CSS3-ominaisuuksia joidenkin tehosteiden saavuttamiseksi navigointivalikossa, joka sisältää valmistajan etuliitteitä (-MOZ-, -O-, -webKit-), jotta se toimisi oikein eri selaimissa. Itse en kuitenkaan kannata etuliitteiden käyttöä, koska se paisuttaa CSS-tiedostoa.

Tästä syystä päätin käyttää prefiksitöntä, Lea Veroun luomaa JavaScript-kirjastoa, joka käsittelee toimittajan etuliitteitä automaattisesti taustalla. Joten meidän on vain kirjoitettava virallinen syntaksi W3C: stä.

Lataa tiedosto ja liitä se HTML-tiedostoon.

Hyvä on, olemme kaikki perustettu; nyt aloitetaan HTML-merkinnän jäsentäminen.

HTML-merkintä

Navigointi on melko yksinkertaista. Siinä on viisi valikoimaa, jotka on kääritty järjestämättömään luettelotunnisteeseen. Avaa suosikki HTML-editori ja aseta seuraava merkintä:

LESS Styling

Tässä osassa aloitamme navigoinnin muotoilun LESS-kielellä. Niille, jotka ovat uusia ohjelmointikielelle, CSS-syntaksin kirjoittaminen LESSin kanssa tuntuu hieman outolta ja hankalalta. Mutta älä huoli, kun käytät jotakin käytäntöä, se on varmasti nautittavampaa kuin tapa, jolla kirjoitamme puhdasta CSS: ää (se on kokemukseni, se on myös hieman addiktoiva).

Tarkastellaanko inspiraation lähteestä navigointityyliä.

Kuten edellä esitetystä kuvasta näkyy, Apple.com-navigoinnilla on seuraavat 6 yleisintä tyyliä:

• varjo
• reunus
• jakaja
• kaltevuudet
• hover vaikutus
• teksti

Tallennamme nämä tyylit ja tallennamme ne sisälle config.less oletustyyliä konfiguraatio; jotkut suunnittelijat saattavat myös nimetä sen lib.css se tarkoittaa Kirjasto. Linkitä tämä tiedosto asiakirjaan.

Varmista, että asetat sen ennen LESS JavaScript -kirjastoa.

Määritä väripohja muuttujilla

Tässä vaiheessa määritämme navigointivärin pohjan käyttämällä muuttujia. LESS-muuttuja ilmoitetaan käyttämällä @ symboli.

@theme: # 555;

Tämä @teema muuttuja on vakioväri; me käytämme sitä kaikin mahdollisin tavoin täydelliseen värimaailmaan ja siten, että värikoostumuksen odotetaan olevan johdonmukaisempi.

Määritä oletusvarjostyyli sekoittimilla

Yksi ominaisuuksista, joita rakastan LESSistä, on Mixins. Se on ohjelmointikonsepti, joka tallentaa useita ennalta määriteltyjä tyylejä, jotka LESS: ssä voidaan periä luokkiin tai tunnisteisiin myöhemmin tyylitaulukkoon.

.shadow box-shadow: 0 1px 2px 0 @theme; 

Yllä olevassa koodissa en sisältänyt etuliitteenä olevaa versiota box-varjo ominaisuus, koska etuliite-vapaa kirjasto käsittelee ne automaattisesti. Myös varjo väri on peritty teema vaihteleva väri.

Määritä reunustyyli parametrisekoittimilla

Navigointipalkki tarvitsee erillisen reunavärin, jossa on hieman pyöristetty kulma. Voimme koota rajatyylin Parametric Mixinsin avulla. Sillä on käytännössä samat toiminnot kuin Mixins, vain ero on siinä, että siinä on myös vaihdettavia parametreja, joten arvot ovat säädettävämpiä.

.raja (@radius: 3px) border-radius: @radius; raja: 1px kiinteä @theme - # 050505; 

Yllä olevassa koodissa määrittelemme oletusrajan @säde varten 3px ja kuten aiemmin mainitsimme, tätä arvoa voidaan muuttaa myöhemmin.

Määritä gradientti, jakaja ja hover-tyyli toiminnolla

Toiminta on yksinkertaisesti ohjelmointikieli, jossa voidaan käyttää matemaattista kaavaa, kuten Addition, Division, Subtraction ja Multiplication, jotta saat halutun tuloksen. Katsotaanpa seuraavaa koodia:

.jakaja border-style: kiinteä; raja-leveys: 0 1px 0 1px; reunaväri: läpinäkyvä @theme - # 111 avoin @theme + # 333; 

Yllä olevassa koodissa vähennämme @teema muuttuja # 111, Näin vasemman reunan väritulos olisi hieman tummempi. Vaikka oikean reunan väri on peräisin lisäyksestä @teema vaihteleva kuusivärisellä # 333, tuotos olisi kevyempi.

Värimallitaso

Joillekin teistä, jotka saattavat sekoittaa kaavoihin, tarkastellaan alla olevaa värikaaviota saadaksesi paremman käsityksen:

Tumma sävy on suurin # 000 (musta), kun taas enimmäisvaloääni on #F F F (valkoinen) ja nykyinen väripohja on # 555. Joten, jos haluamme, että väripohja on 3 tasot, jotka ovat tummempia nykyisestä, voimme yksinkertaisesti vähentää sen # 333. Samoin voidaan käyttää myös värien vaalentamiseen.

Seuraavaksi käytämme gradientin väriä.

.kaltevuus tausta: lineaarinen gradientti (alkuun, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect tausta: lineaarinen kaltevuus (alkuun, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Määritä tekstityyli Guard Mixinsin avulla

Suunnittelemme navigointipalkissa 2 väriä, tummaa väriä ja yhtä valoa. Käytämme kahta ehdollista lausumaa tekstille käyttämällä Guard Mixinsia.

Ensinnäkin, kun tekstille annetaan väri, jonka vaaleus on vähintään 50%, text-shadow pitäisi kääntyä tumma, tässä tapauksessa väri # 000000.

.textcolor (@txtcolor) kun (vaaleus (@txtcolor)> = 50%) väri: @txtcolor; teksti-varjo: 1px 1px 0px # 000000; 

Sitten, kun tekstille annetaan väri, jonka vaaleus on alle 50% text-shadow muuttuu valkoiseksi.

.textcolor (@txtcolor) kun (vaaleus (@txtcolor)) 
Tuo LESS
 
Luo nyt toinen .Vähemmän tiedoston nimi styles.less ja tuonti config.less siihen:
 
@import "config.less";
 
Lisää kirjasinperhe
 
Jotta navigointipalkki voi näyttää houkuttelevammalta, sisällytämme uuden fonttiperheen @ Font-face sääntö. Yllättävän, @ Font-face sääntöä on jo tuettu IE6: n jälkeen!
 
Tällä kertaa käytämme Asap-fonttia. Lataa se Font Squirrelin fonttikuvakokoelmasta. Lisää sitten seuraavat tyylit äskettäin luotuun styles.less tiedosto.
 
@ font-face font-family: 'AsapRegular'; src: url ( 'kirjasimet / Asap-Regular-webfont.eot'); src: url ('fontit / Asap-Regular-webfont.eot? #iefix') -muodossa ('upotettu-opentype'), URL-osoite ('fontit / Asap-Regular-webfont.woff') -muodossa ('woff'), URL-osoite ('fonts / Asap-Regular-webfont.ttf') -muodossa ('truetype'), url ('fontit / Asap-Regular-webfont.svg # AsapRegular') -muodossa ('svg'); font-weight: normaali; font-style: normaali;  
 
Kehon muotoilu väritoiminnoilla
 
Nyt annamme taustavärin ruumis (sen pitäisi olla vaaleampi kuin väripohja) sekä fontin perheen ja kirjasinkoon määrittäminen. Voimme lähestyä vaikutusta käyttämällä Color-funktioita:
 
Seuraava koodi vaalentaa taustaa 30%.
 
keho tausta: vaalentaa (@theme, 30%); font-family: AsapRegular, sans-serif; kirjasinkoko: 11pt; 
 
 
 
Navigoinnin muotoilu sisäkkäisellä säännöllä
 
LESSissä pystymme sijoittamaan tyylit suoraan vanhemmansa alle. Katsokaamme alla olevaa koodia.
 
 nav tunniste, joka sisältää kaikki tarvittavat navigointielementit, saavat seuraavat tyylit.
 
nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; .border; .varjo; 
 
Huomaa, että sen sijaan, että olisit antanut joukon CSS-sääntöjä uudelleen, vain lisättiin .reunus antaa rajatyylin ja .varjo lisätä varjo. Todellisissa tapauksissa näitä luokkaryhmiä voidaan käyttää uudelleen myös toisessa elementissä, missä sitä tarvitaan.
 
 
 
Seuraavaksi annamme tyylit ul sisällä nav nollan pehmuste ja marginaali. Ei niin kauan sitten lähestymme tyyliä kirjoittamalla jotain tällaista:
 
nav … nav ul …
 
Tällä lähestymistavalla ei ole mitään vikaa, itse asiassa, tapasin sen aina joka kerta ja olen melko mukava siihen. Tämä menetelmä, moni CSS-suunnittelija on kuitenkin sanonut, on verhottu ja joissakin tapauksissa helposti hallittavissa.
 
Nyt voimme tehdä tämän kaltaisen:
 
nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; .border; .varjo; ul padding: 0; marginaali: 0; 
 
 
 
Ja sitten valikko näkyy rivillä näyttö: inline omaisuus.
 
nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; .border; .varjo; ul padding: 0; marginaali: 0; li näyttö: inline; 
 
 
 
Alla olevassa syntaksi määrittelemme valikon ankkuritunnisteen tyylin ja lisäävät ennalta määritellyt tyylit, jotka ovat: .textcolor, .jakaja, .kaltevuus.
 
nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; .border; .varjo; ul padding: 0; marginaali: 0; li näyttö: inline; a text-decoration: ei mitään; näyttö: inline-block; float: vasen; leveys: 156px; korkeus: 45px; text-align: center; linjan korkeus: 300%; .textcolor (# f2f2f2); // Voit muuttaa tätä riviä .divider; .kaltevuus; 
 
Yllä olevassa koodissa käytämme kuusiväristä # f2f2f2 jossa vaaleutta pidetään yli 50%, joten odotamme, että varjo muuttuu tummaksi (automaattisesti). Loput koodista, josta olen varma, on varsin itsestään selvä.
 
 
 
Kuitenkin, jos tarkastelemme yllä olevaa tulosta, jokaisella valikossa on jakajat, jolloin viimeinen osa ylittyy pohjaan. Joten meidän täytyy jättää navigointipalkin ensimmäisen ja viimeisen lapsen rajastyyli.
 
nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; .border; .varjo; ul padding: 0; marginaali: 0; li näyttö: inline; a text-decoration: ei mitään; näyttö: inline-block; float: vasen; leveys: 156px; korkeus: 45px; text-align: center; linjan korkeus: 300%; .textcolor (# f2f2f2); // Voit muuttaa tätä riviä .divider; .kaltevuus;  li: ensimmäinen lapsi a border-left: ei;  li: viimeinen lapsi a raja-oikeus: ei; 
 
 
 
Hover State
 
Viimeiseen vaiheeseen lisätään hover-vaikutus. LESSissä voimme lisätä pseudo-elementti kuten : hover käyttämällä & symboli.
 
nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; .border; .varjo; ul padding: 0; marginaali: 0; li näyttö: inline; a text-decoration: ei mitään; näyttö: inline-block; float: vasen; leveys: 156px; korkeus: 45px; text-align: center; linjan korkeus: 300%; .textcolor (# f2f2f2); // Voit muuttaa tätä riviä .divider; .kaltevuus; &: hover .hovereffect;  li: ensimmäinen lapsi a border-left: ei;  li: viimeinen lapsi a raja-oikeus: ei; 
 
 
 
Muuta väriteemaa
 
Tässä on LESSin viileä osa. Jos haluamme muuttaa yleistä väriteemaa, voimme tehdä sen vähemmän rivimuutoksissa kuin mitä tarvitsemme puhtaassa CSS: ssä.
 
Tässä tapauksessa vaihdan navigointivärin hieman kevyemmäksi. Vaihda vain seuraavat kaksi riviä.
 
@theme: #ccc; // Muuta tätä
 
.textcolor (# 555); //Ja tämä
 
Ja tässä on tulos.
 
 
 
Käännä LESS osaksi CSS
 
Kun käytämme edelleen LESS JavaScript -ohjelmaa, se tarttuu .Vähemmän tiedosto ja kääntää se staattiseksi CSS: ksi, jotta tavallinen selain voi tulkita sen. Tämä on kaksinkertainen työ asiakkaan puolella, puhumattakaan tarpeettomasta ja tuhlaa kaistanleveyttä. LESSin pääpiste on työnkulussa, joka yksinkertaistaa käytäntöämme, kun tilastoidaan staattinen CSS, joka on dynaamisempi ja ohjelmoitavampi.
 
Joten, kun aiomme siirtää navigointipalkin live-sivustoon, on tärkeää, että LESS-tiedosto kootaan staattiseksi CSS: ksi.
 
Klikkaa Crunch It! iso painike.
 
 
 
Tallenna ..:n harjoitustiedostoon, linkitä se HTML-dokumenttiin ja irrota se .Vähemmän & less.js tiedostosta.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: kiinteä; raja-leveys: 0 1px 0 1px; raja-väri: läpinäkyvä # 444444 läpinäkyvä # 888888;  .gradient tausta: lineaarinen gradientti (alkuun, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect tausta: lineaarinen gradientti (alkuun, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fontit / Asap-Regular-webfont.eot'); src: url ('fontit / Asap-Regular-webfont.eot? #iefix') -muodossa ('upotettu-opentype'), URL-osoite ('fontit / Asap-Regular-webfont.woff') -muodossa ('woff'), URL-osoite ('fonts / Asap-Regular-webfont.ttf') -muodossa ('truetype'), url ('fontit / Asap-Regular-webfont.svg # AsapRegular') -muodossa ('svg'); font-weight: normaali; font-style: normaali;  body tausta: # a2a2a2; font-family: AsapRegular, sans-serif; kirjasinkoko: 11pt;  nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; raja-säde: 3px; raja: 1kpl kiinteä # 505050; laatikko-varjo: 0 1px 2px 0 # 555555;  nav ul pehmuste: 0; marginaali: 0;  nav ul li näyttö: inline;  nav ul li a text-decoration: ei; näyttö: inline-block; float: vasen; leveys: 156px; korkeus: 45px; text-align: center; linjan korkeus: 300%; väri: # f2f2f2; teksti-varjo: 1px 1px 0px # 000000; raja-tyyli: kiinteä; raja-leveys: 0 1px 0 1px; raja-väri: läpinäkyvä # 444444 läpinäkyvä # 888888; tausta: lineaarinen gradientti (alkuun, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover tausta: lineaarinen gradientti (alkuun, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: ensimmäinen lapsi a border-left: ei;  nav ul li: viimeinen lapsi raja-oikeus: ei;  
 
Katsotaanpa jälleen tulosta.
 
 
 
Ja olemme valmiita, kokeile kokeilla sitä.
 
johtopäätös
 
Olemme oppineet paljon LESS-kielestä tänään, kuten:
 

• muuttujat.
• Mixins
• Parametriset sekoittimet
• toiminnot
• Vartioitu sekoitus
• Ja sisäkkäiset säännöt

Vaikka on monia asioita, jotka voidaan kattaa edelleen, ja monia mahdollisuuksia näyttää ja selittää, toivomme, että nautit tästä perusopetuksesta.

• esittely
• Lataa lähde