Čo je menej CSS a ako ho používate?

Ak ste skúsený vývojár CSS, budete si dobre vedomí nedostatkov jazyka. Stále mu chýba rozšírená podpora pre dlho požadované funkcie, ako je vnorenie a mixiny.

Menej (Leaner Style Sheets) je rozšírenie CSS s mnohými výkonnými funkciami. Ak poznáte CSS, naučiť sa Less je jednoduché, pretože syntax Lessa je veľmi podobná.

Ako inštalovať menej

Menej môžete nainštalovať pomocou Správca balíkov JavaScript, NPM behom:

npm install less -g

Po inštalácii môžete kompilovať .menej súbory do .css pomocou menejc príkaz. Napríklad nasledujúci príkaz sa skompiluje štýl.menej a výstupy výsledkov v a style.css súbor.

lessc style.less style.css

Premenné v menej

Na rozdiel od bežné CSS, ktoré používa operátor "--" na definovanie premenných, Menej definuje premenné pomocou symbolu „@“. Napríklad:

@šírka:40 pixelov;
@výška:80 pixelov;

Blok kódu jednoducho vytvorí dve premenné, šírku a výšku, ktoré obsahujú dve hodnoty: 40px a 80px. Bežnou praxou je vziať bežne používané hodnoty v CSS a uložiť ich do premennej. To uľahčuje úpravu týchto hodnôt, pretože existuje len jeden zdroj kontroly.

Tu je návod, ako môžete použiť premenné v Less. Vytvorte index.htm súbor a pridajte nasledujúci štandardný kód:

html>
<htmllang="sk">
<hlavu>
<metaznakovú sadu="UTF-8">
<metahttp-ekviv="X-UA-kompatibilné"obsahu="IE=okraj">
<metanázov="výrez"obsahu="width=device-width, initial-scale=1.0">
<odkazrel="štýlov"href="style.css">
<titul>Používanie menej CSStitul>
hlavu>
<telo>
<div>
 Pozdrav od detí planéty Zem!
div>
telo>
html>

Ďalej vytvorte a štýl.menej súbor a pridajte nasledujúce:

@šírka:400 pixelov;
@výška:400 pixelov;
@vertical-center: centrum;
@txt-white: biely;
@bg-red: rgb(220, 11, 11);
@font-40:40 pixelov;
div {
šírka: @šírka;
výška: @výška;
displej: flex;
farba: @txt-biely;
farba pozadia: @bg-red;
veľkosť písma: @font-40;
}

Teraz, keď môžete zostaviť .menej súbor do .css pomocou menejc príkaz:

lessc style.less style.css

Kompilovaný CSS by mal vyzerať takto:

div {
šírka: 400px;
výška: 400px;
displej: flex;
farba: biely;
farba pozadia: #dc0b0b;
veľkosť písma: 40px;
}

Keď otvoríte prehliadač, mali by ste vidieť toto:

S premennými v Less môžete robiť oveľa viac, ako napríklad interpolácia, ktorá vám umožňuje používať premenné ako názvy selektorov, adresy URL a ďalšie. Tu je príklad, ako implementovať premennú interpoláciu:

@custom-selector: kontajner;
.@{custom-selector} {
vypchávka: 10 pixelov;
marža: 10 pixelov;
hranica: pevný 10 pixelov;
}

Vyššie uvedený blok kódu používa @{...} klauzulu na použitie premennej ako selektora. Po kompilácii bude kód mať za následok nasledovné:

.kontajner{
vypchávka: 10px;
marža: 10px;
hranica: pevný 10px;
}

Aritmetické operácie za menej

Menej tiež poskytuje podporu pre aritmetické operácie, ako je sčítanie, odčítanie, delenie a násobenie. Tieto operácie pracujú s konštantami, hodnotami a premennými.

@premenná-1:5 pixelov;
// Násobenie Operácia medzi premennou a konštantou
@premenná-2:@premenná-1 * 2
// Operácia sčítania medzi hodnotou a premennou.
@premenná-3:10 pixelov + @premenná-2

Ako používať Mixins

Mixins vám umožňuje opätovne použiť štýly (alebo kód CSS) v celej šablóne so štýlmi. Iné CSS rozšírenia ako Sass ponúkajú aj Mixins. Na ilustráciu toho, ako mixiny fungujú v Less, vytvorte index.htm a pridajte nasledujúci kód:

html>
<htmllang="sk">
<hlavu>
<metaznakovú sadu="UTF-8">
<metahttp-ekviv="X-UA-kompatibilné"obsahu="IE=okraj">
<metanázov="výrez"obsahu="width=device-width, initial-scale=1.0">
<odkazrel="štýlov"href="style.css">
<titul>Používanie menej CSStitul>
hlavu>
<telo>
<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, expectnda reiciendis
 facilis unde sequi.
div>
<p>
 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, expectnda reiciendis
 facilis unde sequi.
p>
<p>
 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, expectnda reiciendis
 facilis unde sequi.
p>
telo>
html>

Ďalej vytvorte a štýl.menej súbor a pridajte nasledujúce riadky:

.ukážkový-text() {
farba pozadia: žltá;
}
.prvé písmeno() {
farba pozadia: červená;
farba: biely;
veľkosť písma: 30 pixelov;
}
p {
.ukážkový-text();
}
p::prvé písmeno {
.prvé písmeno();
}

Vo vyššie uvedenom bloku kódu sú dve zmiešané triedy: .ukážkový-text a .prvé písmeno. Ak chcete použiť mix v inej časti predlohy štýlov, jednoducho naň odkážte názvom so zátvorkami na konci: .mixin(). V prehliadači by ste mali vidieť niečo takéto:

Štýlové hniezdenie za menej

Povedzme, že máte nadradený prvok div s dvoma prvkami ako jeho potomkami: a p prvok a ďalší div. Zvyčajne, ak chcete štýl p prvok s červenou farbou a div prvky so zelenou farbou, môžete použiť nasledujúci prístup:

divp {
farba: červená;
}
div {
farba: zelená
}

Menej poskytuje podobnú funkčnosť prostredníctvom použitia hniezdenie. Takže v tomto prípade by Menej ekvivalent vyššie uvedeného bloku kódu bol:

div {
farba: zelená;
p {
farba: červená;
 }
}

Nielenže je to jednoduchšie omotať si hlavu, ale kód je tiež ľahšie udržiavateľný. Odkazovanie na rodičovské selektory s menej je jednoduchšie s & operátor. Napríklad:

tlačidlo {
farba pozadia: Modrá;
hranica: žiadny;
&:vznášať sa {
farba pozadia: šedá;
transformovať: mierka(1.2);
 }
}

Výsledkom vyššie uvedeného bloku kódu bude po kompilácii nasledujúci kód CSS:

tlačidlo {
farba pozadia: Modrá;
hranica: žiadny;
}
tlačidlo:vznášať sa {
farba pozadia: sivá;
transformovať: stupnica(1.2);
}

Menej pochopte rozsah a funkcie

Rovnako ako bežné programovacie jazyky, aj premenné majú rozsah bloku, v ktorom ich definujete. Na ilustráciu vytvorte nový index.htm a pridajte prvý štandardný kód HTML poskytnutý skôr. Potom pridajte nasledujúci blok do telo značka:

<divtrieda="vonkajší div">
 Outer Div by mal byť červený.
<br />
<rozpätietrieda="inner-div">
 Vnútorná časť by mala byť zelená.
rozpätie>
div>

V štýl.menej súbor, pridajte nasledujúce riadky:

@bg-color: červená;
telo {
veľkosť písma: 40 pixelov;
farba: biely;
marža: 20 pixelov;
}
.vnútorný-div {
@bg-color: zelená;
farba pozadia: @bg-color;
}
.vonkajší-div {
farba pozadia: @bg-color;
}

The vnútorný-div blok predefinuje bg-color premenná s rozsahom práve na tento blok. Takže zelená farba platí len pre túto triedu a nemá vplyv na globálnu bg-color premenlivý. Keď skompilujete a otvoríte výsledok v prehliadači, mali by ste vidieť toto:

Menej tiež poskytuje užitočné funkcie, ktoré môžu byť v niektorých scenároch prospešné. Napríklad, ak chcete nastaviť štýl, len ak je splnená určitá podmienka, môžete to urobiť pomocou ak funkciu. Táto funkcia má nasledujúcu syntax:

ak((podmienka), hodnota1, hodnota2)

Kód sa vráti hodnota1 ak je splnená podmienka a hodnota2 inak. Tu je príklad:

@var1:20 pixelov;
@var2:20 pixelov;
div {
vypchávka: ak((@var1 = @var2), 10 pixelov, 20 pixelov);
}

Výsledkom vyššie uvedeného bloku kódu by mal byť nasledujúci CSS pri kompilácii:

div {
vypchávka: 10px;
}

Urobte viac s menej a inými rozšíreniami CSS

Tisíce vývojárov používajú Less, aby bolo písanie CSS trochu zábavné. Úžasné funkcie, ako sú funkcie, mixy a premenné, sú len malou časťou toho, čo Less ponúka.

Menej je vhodné pre malé aj veľké projekty. Stojí za zmienku, že ďalšie rovnako úžasné jazyky rozšírenia CSS, ako sú Sass a Stylus CSS, stoja za vyskúšanie.