Jedna z věcí, které CSS Ve výchozím nastavení nemá použití struktur ve stylu programování, kde můžeme kód znovu použít logickým způsobem. Nejvíce toho, čeho můžeme dosáhnout standardním způsobem, je vytvořit třídy a seskupit v rámci štítků to, čím chceme být ovlivněni. tyto změny.
Tento přístup znamená, že na konci dne skončíme s dlouhými listy stylů, a přestože se tento výsledek nebude lišit Less.jsPokud se způsob, jakým se k uvedeným listům dostaneme, změní, je to díky Mixiny a dědičnost, kde můžeme deklarovat a používat některé komponenty, abychom se vyhnuli ručnímu vývoji struktur.
Požadavky1- Abychom mohli provést tento tutoriál, budeme předem vyžadovat nějaké věci, musíme mít složku, kam můžeme ukládat naše soubory .méně Y .css, musíme mít oprávnění, abychom mohli v případě potřeby provádět změny.
2- Musíme mít funkční instalaci Less.js, jakož i všechny jeho předpoklady, jaké jsou Node.js Y npm, abychom mohli sestavit naše generované šablony stylů.
3- Nakonec budeme také potřebovat textový editor, abychom mohli vytvořit kód, který můžeme použít Vznešený text o NotePad ++, i když nám bude fungovat i klasický poznámkový blok, vše závisí na tom, zda chceme pomoc s kódem nebo pokročilé funkce.
Nastavte vlastnosti CSS pomocí mixinuJedna z prvních věcí, o kterých bychom měli vědět Mixiny, je, že jsou to metody, které nám pomáhají stanovit vlastnosti CSS pro náš projekt způsobem, který nám pomůže znovu použít kód a dosáhnout konzistentnějších stylů. Zvláštností Mixinu je, že při kompilaci našeho kódu Méně To se nebere v úvahu, v tom smyslu, že se negeneruje šablona stylů Mixins, toho je dosaženo zahrnutím závorek při jejich definování, jakmile máme Mixin, musíme importovat jeho zdrojový soubor a tímto způsobem jednoduše jeho hodnoty jsou přeneseny do našeho hlavního listu, který zahrneme na naši stránku.
Vytváření našich prvních Mixin
Pojďme vytvořit a Mixin což nám umožňuje stanovit vlastnictví CSS zaokrouhlit hrany prvku v našem HTMLK tomu musíme provést následující kroky:
1- Ve složce projektu vytvoříme soubor s názvem mixins.less, a dovnitř umístíme následující obsah:
.obklopené hrany () {poloměr ohraničení: 7px; }2- Nyní vytvoříme soubor s názvem bez projektu, zde určíme způsob, jakým budou použity různé styly naší stránky HTML, abychom si zvykli pracovat s Méně vytvoříme několik pravidel CSS abychom viděli, jak MixinyPodívejme se na kód, který musíme do tohoto souboru vložit.
@import "mixins.less"; @ header-background-color: blue; @ content-background-color: green; @ footer-background-color: red; hlavička {. zaoblené hrany (); color-background: @ header-background-color; barva: kontrast (@ záhlaví-barva pozadí); } p {. zaoblené hrany (); color-background: @ content-background-color; barva: kontrast (@ obsah-barva-pozadí); } zápatí {. zaoblené hrany (); color-background: @ footer-background-color; barva: kontrast (@ zápatí-barva pozadí); }Jak vidíme, začneme importem souboru, který jsme vygenerovali v předchozím kroku, poté vytvoříme 3 proměnné, kterým dáme hodnotu jako barvu, nakonec začneme vytvářet třídy pro prvky HTML, první věc, kterou uděláme, je zavolat naši funkci Zaoblené hrany (), a potom přiřadíme barvám prvků proměnné.
3- V tomto kroku vytvoříme soubor HTML, kterou můžeme nazvat jakkoli chceme, pokud má strukturu jako následující:
Mixiny s Less La cabeceraJak vidíme, zahrnutí našeho souboru jsme jednoduše provedli .méně jako .js, který nástroj obsahuje, jsme se rozhodli pro tuto možnost, abychom nemuseli kompilovat, musíme však pamatovat na to, že by to nemělo být používáno ve výrobě. V těle HTML Generujeme různé prvky, které jsme definovali v CSS, abychom viděli použití stylů.Obsah
Zápatí
4- Nakonec, pokud chceme vidět výsledek, stačí otevřít náš dokument v prohlížeči jako Firefox a abychom mohli vidět, jak vše vypadá, podívejme se na následujícím obrázku, co jsme dostali:
Pokud půjdeme trochu dále a uvidíme zdrojový kód, který prohlížeč interpretuje, uvidíme, jak různé proměnné a Mixin aplikován, byl ve skutečnosti nahrazen kódem CSS, což znamená, že i když jsme nemovitost napsali jen jednou Méně umístí to tam, kde odpovídá shoda, podívejme se:
Dědictví v rámci našich stylů
Práce s dědičností je něco, co nám pomáhá, a to je důvod, proč můžeme vytvářet nadřazené prvky, které předávají některé vlastnosti svým podřadným nebo obsaženým prvkům, to znamená, že existují společné vlastnosti, které nebudeme muset opakovat v prvcích, které chceme mít je.
Jako vždy, cílem neopakování kódu je ušetřit nám práci a čas a také snížit chyby a zvýšit udržovatelnost našeho kódu díky konzistenci a centralizaci jeho zdrojů.
Jedním z nejzákladnějších, ale efektivních způsobů, jak pracovat s dědičností, jsou vnořené prvky, řekněme, že máme sekci HTML a uvnitř budeme mít několik prvků, pokud použijeme CSS Klasicky se říká, že všechny prvky této sekce mají nějaké vlastnosti, ale tyto jsou různé, pro každý styl by bylo nutné udělat alespoň jeden řádek, podívejme se, co máme na mysli:
sekce element1 {content1: xx; } sekce element2 {content2: zz; }Jak vidíme, vytváříme více kódu, než bychom potřebovali, místo toho používáme dědičnost a vnořování Méně mohli bychom dosáhnout něčeho takového:
sekce {element1 {content1: xx; } item2 {content2: zz; }}Jak vidíme, píšeme nejen méně, ale také znázornění toho, čeho chceme dosáhnout, je mnohem logičtější, což nám pomáhá pochopit a správně oddělit prvky, které použijeme ve svých stylech.
Vytváření vnořené styly
Nyní použijeme to, co jsme právě vysvětlili v předchozím bodě, musíme vytvořit soubor .méně kde vytvoříme vnořený styl, abychom ušetřili práci a učinili ji logičtější. K dosažení tohoto úkolu musíme provést následující kroky:
1- Pojďme vytvořit soubor.méně co můžeme nazvat dědičnost, zde vytvoříme vnořené styly, abychom to pochopili, jednoduše uvidíme kód, který se chystáme umístit, a tím k nám koncept přijde lepším způsobem.
sekce {h1 {velikost písma: 4em;} p {odsazení: 0 5 pixelů;}}Vidíme, že jsme pro prvek vytvořili styl sekce, a to všechno h1 nebo p v rámci tohoto prvku kontejneru musí pracovat se zavedenými pravidly, která jsme vnořili.
2- Nyní musíme vytvořit náš soubor HTML který bude vypadat hodně jako předchozí cvičení, jaké změny jsou názvy souborů, které mají být zahrnuty, a struktura v rámci tělo, ale pokud to vidíme abstraktně, mluvíme o tomtéž, podívejme se na kód.
Dědičnost za méněJak vidíme jednoduše zahrnutím našeho souboru Méně je, že vygenerujeme potřebné styly, pokud uvidíme, jak to vypadá v prohlížeči, získáme něco jako následující:Náš obsah
Pokud si však všimneme, co se stane s CSS Když je interpretován nebo zkompilován, uvidíme, že vnořená forma, kterou jsme vytvořili, není respektována, ale protože kompilátor vytváří tuto vnořenou formu přímo, nemusíme se obávat, že by to bylo takto, uvidíme, co kód, který náš prohlížeč vidí, vypadá takto:
S tímto můžeme tento tutoriál dokončit, jak jsme viděli Méně není to jen psaní CSS jiným způsobem je, aby byly tyto rozdíly užitečné, což nás vede k úspoře času, zpříjemnění aplikací pro náš vývojový tým a úspoře úsilí logičtějším myšlením a opětovným používáním komponent. To, že nám to všechno dává největší smysl, je, že budeme i nadále praktikovat a aplikovat tyto příklady v praktických i reálných případech, abychom si na tento způsob práce mohli zvyknout.
Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
