Toiminnot yksinkertaistavat huomattavasti ohjelmointikokemustasi, ja tämä pätee myös CSS-koodia kirjoitettaessa.
Less CSS on vankka ja dynaaminen CSS-esiprosessori, joka on kerännyt huomattavaa huomiota ja suosiota viime vuosina. Esiprosessorina se toimii jatkeena "Vanilla CSS: lle", perinteiselle webissä käytettävälle CSS-tyylikielelle. kehittämiseen tarjoamalla joukon lisäominaisuuksia ja toimintoja, jotka parantavat yleistä tyyliä kokea.
Jos olet perehtynyt standardin CSS: n kirjoittamiseen, voit siirtyä saumattomasti käyttämään Less CSS: ää ilman jyrkkää oppimiskäyrää. Tämän yhteensopivuuden ansiosta nykyisen CSS-tietojesi ylläpitäminen on helppoa samalla, kun hyödynnät Lessin edistyneitä ominaisuuksia.
Mitä toiminnot ovat ja miksi ne ovat tärkeitä?
Ohjelmoinnissa funktio on koodilohko, joka suorittaa tietyn tehtävän. Voit myös käyttää sitä uudelleen jossain muualla ohjelmassa. Toiminnot yleensä ottavat vastaan tietoja, käsittelevät sen ja palauttavat tulokset.
Niiden avulla on helppoa vähentää päällekkäistä koodia ohjelman sisällä. Oletetaan esimerkiksi, että sinulla on ohjelma, joka laskee alennuksen käyttäjän antaman hinnan perusteella. Jonkin sisällä
kieli, kuten JavaScript, voit toteuttaa sen näin:toimintotarkista alennus(hinta, kynnys){
jos (hinta >= kynnys){
antaa alennus = 5/100 * hinta;
palata`Alennuksesi on $${alennus}`;
} muu {
palata`Valitettavasti tämä tuote ei oikeuta alennukseen. `
}
}
Sitten voit kutsua funktion ja syöttää sen hinta ja kynnys.
antaa hinta = kehote("Anna tuotteen hinta:")
hälytys (tarkistaAlennus (hinta, 500))
Abstrahoitumalla pois alennusten tarkistamisen logiikasta, ohjelma ei ole vain luettavissa, vaan sinulla on nyt uudelleen käytettävä koodilohko, joka käsittelee alennuksen ja palauttaa tuloksen. Toiminnot voivat tehdä paljon muutakin, mutta tämä on vain perusasiat.
Toimintojen ymmärtäminen vähemmällä CSS: llä
Perinteisessä CSS: ssä sinulla on kehittäjänä käytettävissäsi hyvin rajoitettu joukko toimintoja. Yksi CSS: n suosituimmista toiminnoista on calc()math-funktio joka tekee tarkalleen miltä näyttää – se suorittaa laskelmia ja käyttää tulosta ominaisuuden arvona CSS: ssä.
s{
taustaväri: punainen;
leveys: lask(13px- 4px);
}
Less CSS: ssä on useita toimintoja, jotka tekevät muutakin kuin aritmeettisia operaatioita. Yksi toiminto, jonka saatat kohdata Lessissä, on jos toiminto. The jos funktio ottaa kolme parametria: ehdon ja kaksi arvoa. Alla oleva koodilohko näyttää, kuinka voit käyttää tätä toimintoa:
@leveys: 10px;
@korkeus: 20px;
div{
marginaali:jos((@leveys > @korkeus), 10px, 20px)
}
Yllä olevassa koodilohkossa Less-kääntäjä tarkistaa, onko muuttuja leveys (määritetty @ symboli) on suurempi kuin muuttuja korkeus. Jos ehto on tosi, funktio palauttaa ensimmäisen arvon ehdon jälkeen (10px). Muussa tapauksessa funktio palauttaa toisen arvon (20px).
Käännöksen jälkeen CSS-tulosteen pitäisi näyttää tältä:
div {
marginaali: 20px;
}
Boolen käyttäminen vähemmällä
Boolean on muuttuja, jolla on kaksi mahdollista arvoa: totta tai väärä. Kanssa boolean() -funktiossa Lessissä, voit tallentaa lausekkeen tosi tai epätosi arvon muuttujaan myöhempää käyttöä varten. Näin se toimii.
@text-color: punainen;
@bg-väri: boolen(@tekstin väri = punainen);
Yllä olevassa koodilohkossa Less-kääntäjä tarkistaa, jos teksti-väri on punainen. Sitten bg-väri muuttuja tallentaa arvon.
div{
taustaväri: jos(@bg-väri,vihreä keltainen);
}
Yllä oleva koodilohko käännetään seuraavaksi:
div {
taustaväri: vihreä;
}
Tekstin korvaaminen merkkijonon sisällä Vaihda()-funktiolla
Syntaksi kohteelle korvata() toiminto näyttää tältä:
korvata(merkkijono, kuvio, korvaus, liput)
merkkijono edustaa merkkijonoa, josta haluat etsiä ja korvata. kuvio on etsittävä merkkijono. kuvio voi olla myös säännöllinen lauseke, mutta se on yleensä merkkijono. Onnistuneen ottelun jälkeen Less CSS -kääntäjä korvaa sen kuvio kanssa korvaus.
Valinnaisesti, korvata() funktio voi sisältää myös liput säännöllisen lausekkeen lippujen parametri.
@string: "Hei";
@kuvio: "hei";
@korvaus: "minä";
div::ennen{
sisältö: korvata(@string,@kuvio,@korvaus)
}
Yllä olevan koodilohkon pitäisi johtaa seuraavaan kääntämisen jälkeen:
div::ennen {
sisältö: "Hei";
}
Listaa toiminnot vähemmällä CSS: llä
Vähemmän CSS: ssä voit määrittää arvoluettelon pilkuilla tai välilyönneillä. Esimerkiksi:
@ruokaostokset: "leipä", "banaani", "peruna", "maito";
Voit käyttää pituus() funktio, joka arvioi luettelon elementtien määrän.
@tulos: pituus(@elintarvikkeet);
Voit myös käyttää ottaa talteen() funktio poimimaan arvon tietystä sijainnista. Jos esimerkiksi haluat saada kolmannen elementin ruokaostokset luettelosta, toimi seuraavasti:
@kolmas elementti: ote(@elintarvikkeet, 3);
Toisin kuin tavalliset ohjelmointikielet, joissa luetteloindeksi alkaa nollasta, luettelon aloitusindeksi on aina 1.
Toinen luettelotoiminto, joka voi olla hyödyllinen luotaessa verkkosivustoja Lessillä, on range() toiminto. Se vaatii kolme parametria. Ensimmäinen parametri määrittää aloituspaikan alueella. Toinen parametri ilmaisee loppupaikan ja viimeinen parametri määrittää lisäys- tai vähennysarvon alueen kunkin kohteen välillä. Jos sitä ei ole annettu, oletusarvo on 1.
div {
marginaali: alue (10px, 40px, 10);
}
Yllä olevan koodilohkon tulisi koota seuraavaan:
div {
marginaali: 10px 20px 30px 40px;
}Kuten näet, Less CSS -kääntäjä alkaa 10 pikselistä ja kasvattaa edellistä arvoa 10:llä, kunnes se saavuttaa päätepisteen (40 pikseliä).
Yksinkertaisen verkkosivuston luominen vähemmällä CSS-toiminnolla
On aika koota yhteen kaikki oppimasi ja luoda yksinkertainen projekti Less CSS: n avulla. Luo kansio ja lisää index.htm ja tyyli.vähemmän tiedostot.
Avaa index.htm tiedosto ja lisää seuraava HTML-koodi.
html>
<htmllang="en">
<pää>
<metamerkkisetti="UTF-8">
<metanimi="näkymä"sisältö="leveys = laitteen leveys, alkumittakaava = 1,0">
<linkkirel="tyylitaulukko/vähemmän"tyyppi="teksti/css"href="tyyli.vähemmän" />
<otsikko>Asiakirjaotsikko>
pää>
<kehon>
<divluokkaa="kontti">
<h1>
h1>
div>
<käsikirjoitussrc=" https://cdn.jsdelivr.net/npm/less" >käsikirjoitus>
kehon>
html>
Yllä olevassa koodilohkossa on vanhempi "kontti"div tyhjän kanssa h1 elementti. The src attribuutti käsikirjoitus -tunniste osoittaa polkuun Less CSS -kääntäjään.
Ilman tätä käsikirjoitus -tunnistetta, selain ei pysty ymmärtämään koodiasi. Vaihtoehtoisesti voit asentaa Less CSS: n tietokoneellesi kautta Node Package Manager (NPM), suorittamalla seuraavan komennon terminaalissa:
npm asennus -g vähemmän
Aina kun olet valmis kokoamaan .Vähemmän tiedosto, suorita alla oleva komento ja varmista, että määrität tiedoston, johon kääntäjän tulee kirjoittaa tulos.
lessc style.less style.css
Vuonna tyyli.vähemmän tiedosto, luo kaksi muuttujaa, nimittäin: kontin leveys ja kontti-bg-väri edustamaan leveyttä ja taustaväriä "kontti"div vastaavasti.
@container-width: 50 rem;
@container-bg-color: keltainen;
Luo seuraavaksi kolme muuttujaa, nimittäin: merkkijono, kuvio, ja korvaus. Lisää sitten tyylit "kontti"div ja h1 elementti.
@string: "Terveisiä maapallon lapsilta!";
@kuvio: "Maaplaneetan lapset!";
@korvaus: "Pluton asukkaat!";.container{
leveys: @container-width;
taustaväri: @container-bg-color;
pehmuste: jos(@container-width > 30 rem, range(20px, 80 pikseliä, 20),"");
rajaa: kiinteä;
}
h1:ensimmäinen lapsi::jälkeen{
sisältö: korvata(@string,@kuvio,@korvaus);
}
Yllä olevassa koodilohkossa range() toiminto asettaa pehmuste omaisuutta "kontti"div. Less-kääntäjän tulisi kääntää tyyli.vähemmän tiedosto seuraavaan:
.container {
leveys: 50rem;
taustaväri: keltainen;
pehmuste: 20px 40px 60px 80px;
rajaa: kiinteä;
}
h1:ensimmäinen lapsi::jälkeen {
sisältö: "Heialkaentheasukkaat/Pluto!";
}
Kun avaat index.htm tiedosto selaimessa, sinun pitäisi nähdä tämä:
Paranna tuottavuuttasi CSS-esiprosessoreilla
Tavallisissa ohjelmointikielissä funktiot vähentävät kirjoitettavan koodin määrää ja minimoivat virheet. CSS-esikäsittelijät, kuten Less, tarjoavat useita ominaisuuksia, jotka helpottavat CSS-koodin kirjoittamista.
CSS-esiprosessorit ovat hyödyllisiä suuria tiedostoja käsiteltäessä. Ne helpottavat ongelmien virheenkorjausta ja parantavat siten kehittäjän tuottavuutta.
