Vähemmän CSS: ää voi tehdä kielestä helpompi käyttää syntaksin pikanäppäimillä ja tehokkailla ominaisuuksilla. Ota selvää, mitä vähemmän voi tehdä sinulle.
Jos olet kokenut CSS-kehittäjä, olet hyvin tietoinen kielen haitoista. Siitä puuttuu edelleen laaja tuki pitkään pyydettyille ominaisuuksille, kuten sisäkkäille ja sekoituksille.
Less (Leaner Style Sheets) on CSS: n laajennus, jossa on monia tehokkaita ominaisuuksia. Jos osaat CSS: n, Lessin oppiminen on helppoa, koska Lessin syntaksi on hyvin samanlainen.
Kuinka asentaa vähemmän
Voit asentaa Vähemmän kanssa JavaScript Package Manager, NPM juoksemalla:
npm asenna vähemmän -g
Asennuksen jälkeen voit kääntää .Vähemmän tiedostot .css käyttämällä vähemmänc komento. Esimerkiksi seuraava komento kääntää tyyli.vähemmän ja tulostaa tulokset muodossa a tyyli.css tiedosto.
lessc style.less style.css
Muuttujat in Less
Toisin kuin tavallinen CSS, joka käyttää "--"-operaattoria muuttujien määrittämiseen, Less määrittää muuttujat @-symbolilla. Esimerkiksi:
@leveys:40 pikseliä;
@korkeus:80 pikseliä;
Koodilohko luo yksinkertaisesti kaksi muuttujaa, leveys ja korkeus, joilla on vastaavasti kaksi arvoa: 40px ja 80px. On yleinen käytäntö ottaa yleisesti käytetyt arvot CSS: ssä ja tallentaa ne muuttujaan. Tämä helpottaa näiden arvojen muokkaamista, koska on vain yksi ohjauslähde.
Näin voit käyttää Less-muuttujia. Luo an index.htm tiedosto ja lisää seuraava yleiskoodi:
html>
<htmllang="en">
<pää>
<metamerkkisetti="UTF-8">
<metahttp-ekv="X-UA-yhteensopiva"sisältö="IE = reuna">
<metanimi="näkymä"sisältö="leveys = laitteen leveys, alkumittakaava = 1,0">
<linkkirel="tyylitaulukko"href="tyyli.css">
<otsikko>Käytä vähemmän CSS: ääotsikko>
pää>
<kehon>
<div>
Terveisiä maaplaneetan lapsilta!
div>
kehon>
html>
Luo seuraavaksi a tyyli.vähemmän tiedosto ja lisää seuraava:
@leveys:400 pikseliä;
@korkeus:400 pikseliä;
@vertical-center: keskusta;
@txt-white: valkoinen;
@bg-red: rgb(220, 11, 11);
@font-40:40 pikseliä;
div {
leveys: @leveys;
korkeus: @korkeus;
näyttö: flex;
väri: @txt-valkoinen;
taustaväri: @bg-punainen;
Fonttikoko: @font-40;
}
Nyt kun voit koota .Vähemmän tiedosto .css käyttämällä vähemmänc komento:
lessc style.less style.css
Käännetyn CSS: n pitäisi näyttää tältä:
div {
leveys: 400px;
korkeus: 400px;
näyttö: flex;
väri: valkoinen;
taustaväri: #dc0b0b;
Fonttikoko: 40px;
}
Kun avaat selaimen, sinun pitäisi nähdä tämä:
Voit tehdä Less-muuttujilla paljon enemmän, kuten interpoloinnin, jonka avulla voit käyttää muuttujia valitsimien niminä, URL-osoitteina ja paljon muuta. Tässä on esimerkki muuttujien interpoloinnin toteuttamisesta:
@muokattu valitsin: kontti;
.@{custom-selector} {
pehmuste: 10px;
marginaali: 10px;
rajaa: kiinteä 10px;
}
Yllä oleva koodilohko käyttää @{...} lauseke muuttujan käyttämiseksi valittimena. Käännettynä koodi johtaa seuraavaan:
.container{
pehmuste: 10px;
marginaali: 10px;
rajaa: kiinteä 10px;
}
Aritmeettiset operaatiot vähemmällä
Less tukee myös aritmeettisia operaatioita, kuten yhteen-, vähennys-, jakolasku- ja kertolaskutoimintoja. Nämä toiminnot toimivat vakioiden, arvojen ja muuttujien kanssa.
@muuttuja-1:5px;// Kertolasku Toiminto muuttujan ja vakion välillä
@muuttuja-2:@muuttuja-1 * 2
// Lisäysoperaatio arvon ja muuttujan välillä.
@muuttuja-3:10px + @muuttuja-2
Kuinka käyttää sekoituksia
Mixinsin avulla voit käyttää tyylejä (tai CSS-koodia) uudelleen koko tyylitaulukossa. muu CSS-laajennukset, kuten Sass tarjoavat myös Mixinejä. Havainnollistaaksesi, kuinka mixins toimivat Lessissä, luo index.htm ja lisää seuraava koodi:
html>
<htmllang="en">
<pää>
<metamerkkisetti="UTF-8">
<metahttp-ekv="X-UA-yhteensopiva"sisältö="IE = reuna">
<metanimi="näkymä"sisältö="leveys = laitteen leveys, alkumittakaava = 1,0">
<linkkirel="tyylitaulukko"href="tyyli.css">
<otsikko>Käytä vähemmän CSS: ääotsikko>
pää>
<kehon>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, oletanda reiciendis
facilis unde sequi.
div>
<s>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, oletanda reiciendis
facilis unde sequi.
s>
<s>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, oletanda reiciendis
facilis unde sequi.
s>
kehon>
html>
Luo seuraavaksi a tyyli.vähemmän tiedosto ja lisää seuraavat rivit:
.näyteteksti() {
taustaväri: keltainen;
}.ensimmäinen kirjain() {
taustaväri: punainen;
väri: valkoinen;
Fonttikoko: 30 kuvapistettä;
}s {
.näyteteksti();
}
s::ensimmäinen kirjain {
.ensimmäinen kirjain();
}
Yllä olevassa koodilohkossa on kaksi mixin-luokkaa: .näyteteksti ja .ensimmäinen kirjain. Kun haluat käyttää mixinia toisessa tyylisivun osassa, yksinkertaisesti viittaa siihen nimellä ja lopussa suluissa: .Sekoita joukkoon(). Selaimessa sinun pitäisi nähdä jotain tällaista:
Tyyli Pesivä vähemmässä
Oletetaan, että sinulla on vanhempi div, jonka lapsina on kaksi elementtiä: a s elementti ja toinen div. Tavallisesti, jos haluat tyyli s elementti, jonka väri on punainen ja div elementtejä, joiden väri on vihreä, voit käyttää seuraavaa lähestymistapaa:
divs {
väri: punainen;
}
div {
väri: vihreä
}
Less tarjoaa samanlaisia toimintoja käyttämällä pesiviä. Joten tässä tapauksessa yllä olevan koodilohkon pienempi vastine olisi:
div {
väri: vihreä;
s {
väri: punainen;
}
}
Sen lisäksi, että tämä on helpompi kääriä päätäsi, se tekee koodista myös helpommin ylläpidettävän. Vanhemman valitsimiin viittaaminen vähemmällä on helpompaa & operaattori. Esimerkiksi:
-painiketta {
taustaväri: sininen;
rajaa: ei mitään;
&:hover {
taustaväri: harmaa;
muuttaa: mittakaava(1.2);
}
}
Yllä oleva koodilohko tuottaa seuraavan CSS-koodin käännettäessä:
-painiketta {
taustaväri: sininen;
rajaa: ei mitään;
}
-painiketta:hover {
taustaväri: harmaa;
muuttaa: mittakaavassa(1.2);
}
Laajuuden ja toimintojen ymmärtäminen vähemmällä
Kuten tavallisilla ohjelmointikielillä, muuttujilla on sen lohkon laajuus, jossa ne määritetään. Tämän havainnollistamiseksi luo uusi index.htm tiedosto ja lisää ensimmäinen aiemmin toimitettu HTML-pohjakoodi. Lisää sitten seuraava lohko kohtaan kehon tag:
<divluokkaa="ulko-div">
Outer Divin tulee olla punainen.
<br />
<jänneväliluokkaa="sisäinen-div">
Sisäosan tulee olla vihreä.
jänneväli>
div>
Vuonna tyyli.vähemmän tiedosto, lisää seuraavat rivit:
@bg-väri: punainen;kehon {
Fonttikoko: 40 pikseliä;
väri: valkoinen;
marginaali: 20px;
}.inner-div {
@bg-väri: vihreä;
taustaväri: @bg-väri;
}
.outer-div {
taustaväri: @bg-väri;
}
The sisäinen div lohko määrittelee uudelleen bg-väri muuttuja, joka koskee vain tätä lohkoa. Joten vihreä väri koskee vain tätä luokkaa eikä vaikuta globaaliin bg-väri muuttuja. Kun käännät ja avaat tuloksen selaimessa, sinun pitäisi nähdä tämä:
Less tarjoaa myös käteviä toimintoja, joista voi olla hyötyä joissakin tilanteissa. Jos esimerkiksi haluat asettaa tyylin vain, jos tietty ehto täyttyy, voit tehdä sen käyttämällä jos toiminto. Tällä funktiolla on seuraava syntaksi:
jos((kunto), arvo1, arvo2)
Koodi palaa arvo1 jos ehto täyttyy ja arvo2 muuten. Tässä on esimerkki:
@var1:20px;
@var2:20px;
div {
pehmuste: jos((@var1 = @var2), 10px, 20px);
}
Yllä olevan koodilohkon pitäisi johtaa seuraavaan CSS: ään käännettäessä:
div {
pehmuste: 10px;
}Tee enemmän vähemmällä ja muilla CSS-laajennuksilla
Tuhannet kehittäjät käyttävät Vähempää tehdäkseen CSS: n kirjoittamisesta hieman nautinnollista. Hämmästyttävät ominaisuudet, kuten toiminnot, sekoitukset ja muuttujat, ovat vain pieni osa Lessin tarjoamista.
Less sopii sekä pieniin että suuriin projekteihin. On syytä huomata, että muut yhtä hämmästyttävät CSS-laajennuskielet, kuten Sass ja Stylus CSS, ovat tutustumisen arvoisia.
