Používat méně. LESS: Programovatelný stylový jazyk. Variabilní rozsah

Nemám rád CSS. Je to jednoduché a přehledné. To je hybnou silou internetu, ale je příliš omezený a obtížně ovladatelný. Je čas vyčistit tento jazyk a učinit jej užitečnějším pomocí dynamického CSS s LESS.
Svůj postoj vysvětlím na příkladu. Proč místo použití #FF9F94 k získání tmavě broskvové barvy neuložit hodnotu této barvy do proměnné pro pozdější použití? Pro přebarvení webu bude stačit změnit hodnotu proměnné na jednom místě a je to.
Jinými slovy: bude to velmi úhledné, pokud použijeme trochu programování a logiky v CSS, abychom z něj udělali silnější nástroj. Dobrá věc je, že to vše je možné pomocí LESS.

Co je LESS? LESS je nadmnožina CSS. To znamená, že jakýkoli kód CSS je platný LESS, ale další prvky LESS nebudou fungovat v prostém CSS. To je skvělé, protože stávající CSS je již platný kód LESS, což snižuje bariéru vstupu do nové technologie.
LESS přidává do CSS mnoho užitečných dynamických vlastností. Představuje proměnné, operace, funkční prvky a mixiny. Být schopen psát styly modulárně vám ušetří spoustu potíží Jak používat LESS Existují dva způsoby, jak používat LESS. Můžete vytvořit soubor LESS a převést jej, když Nápověda Javascript za běhu nebo jej předem zkompilujte a použijte výsledný soubor CSS. Nebojte se slova „kompilovat“ (používám ho neustále), je to velmi jednoduché Použití LESS a souboru Javascript Nejprve si musíte stáhnout soubor LESS Javascript z webu LESS a propojit ho se stránkou. jako každý jiný skript js.

Poté vytvoříme soubor s příponou .less a svážeme jej pomocí následujícího kódu:

Ujistěte se, že jste před JS připojili soubor LESS.
Nyní bude soubor LESS fungovat stejně jako běžný CSS.

Kompilace LESS souboru I když je tato metoda trochu zdlouhavější, někdy je výhodnější. Abyste nepřeváděli kód při každém načtení stránky, můžete použít výsledný soubor CSS. Převaděče: pro Windows – Winless a LESS.app pro Mac Využití síly LESS Nakonec se pojďme trochu pobavit – napište LESS kód. Jak uvidíte, kód je velmi snadno čitelný a srozumitelný, protože používá syntaxi podobnou CSS Proměnné Proměnné v LESS fungují stejně jako v PHP, JS a většině ostatních programovacích jazyků. Můžete je použít k uložení hodnoty a pak použít proměnné místo hodnoty samotné, kdykoli ji budete potřebovat.

@header-font: Georgia; h1, h2, h3, h4 ( font-family: @header-font; ) .large ( font-family:@header-font; )
Ve výše uvedeném příkladu deklarujeme proměnnou @header-font a zapíšeme do ní hodnotu „Georgia“. Nyní můžeme tuto proměnnou použít, kdykoli chceme nainstalovat písmo Georgia. Pokud se rozhodneme, že pro naše hlavičky se lépe hodí Trebuchet MS, pak nebudeme muset prohlížet celý soubor, jednoduše změníme hodnotu proměnné.
Našel jsem skvělé využití proměnných při definování barev stránek. Za starých dobrých časů (které nebyly tak dávno) jsem používal něco takového:

/* Barvy pro můj web #ff9900 - Oranžová - používá se pro odkazy a zvýrazněné položky #cccccc - Světle šedá - používá se pro okraje #333333 - Tmavě černá - Používá se pro tmavé pozadí a barvu textu nadpisu #454545 - Středně černá - Používá se pro obecný text barva */ tělo ( pozadí: #333333; barva: #454545; ) a ( barva:#ff9900; ) h1, h2, h3, h4, h5, h6 ( barva: #333333; )
Není nic špatného na zdokumentování vašich barev, jako je tato dobrá praxe, problém je v tom, že dokumentace nemá nic společného s funkčností vašich stylů. Pokud se rozhodnete změnit barvy po řádku 2000 kódu a poté změníte názor na řádku 3567, bude velmi obtížné opravit všechny barvy a dokumentaci.
S LESS můžeme upravovat a dokumentovat naše pracovní postupy zároveň.

/* Barvy pro můj web */ @color-orange: #ff9900; @color-grey_light: #cccccc; @color-black_dark: #333333; @color-black_medium: #454545; tělo ( pozadí: @color-black_dark; color: @color-black_medium; ) a ( color:@color-orange; ) h1, h2, h3, h4, h5, h6 (color: @color-black_dark; )

Variabilní rozsah Variabilní rozsah popisuje místa, kde jsou přístupné. Pokud definujete proměnnou na samém začátku souboru LESS, bude dostupná pro jakýkoli kód napsaný za ní.
Můžete také definovat proměnnou uvnitř pravidla CSS. V tomto případě nebudou proměnné dostupné mimo toto pravidlo, lze je použít lokálně.

Tlačítko A ( @color: #ff9900; color:@color; ) ( pozadí: @color; )
V tomto příkladu nebude LESS převedeno kvůli chybě, která není definována pro použití uvnitř prvku tlačítka. Pokud je proměnná deklarována mimo prvek a uvnitř jiného prvku, bude přístupná pouze lokálně.

@barva: #222222; a ( @color: #ffffff; color:@color; ) tlačítko ( background: @color; )
Zde bude odkaz obarven bíle a tlačítko bude mít černé pozadí.

Proměnné v proměnných Pokud jste kódovali v PHP, pak víte, že můžete deklarovat název proměnné v jiné proměnné.

@color-chirstmas_red: #941f1f; @name-of-color: "color-chirstmas_red"; barva: @@název-barvy;
Osobně to moc nepoužívám, protože proměnné v proměnných jsou bez uzávěrů téměř k ničemu, ale jsem si jistý, že se najdou chytré příklady použití.

Konstanty a proměnné Je důležité poznamenat, že na rozdíl od toho, co jste právě četli, jsou proměnné v LESS spíše konstanty. To znamená, že na rozdíl od proměnných je lze definovat pouze jednou Operace Pomocí operací v LESS můžete dosáhnout neuvěřitelně přesné kontroly. Myšlenka je jednoduchá:

Tlačítko ( @jednotka: 3px; ohraničení:@jednotka plná #ddd; výplň: @jednotka * 3; okraj: @jednotka * 2; )
Výše uvedený kód nastavuje proměnnou na 3px. Tuto hodnotu pak nastavíme na šířku rámečku, výplň na trojnásobek této šířky a okraj na dvojnásobek této šířky.
Můžete použít operace násobení, dělení, sčítání a odčítání. Chcete-li vytvořit blok s okrajem, který zvětšuje šířku stran ve směru hodinových ručiček, můžete použít následující kód:

Box( @base_unit: 1px; border: @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3 )

Správa barev Moje oblíbená funkce LESS je správa barev. Můžete použít operace pro míchání barev a více speciální funkce práce s barvami Chcete-li změnit hodnotu barvy, můžete to provést odečtením nebo přidáním jiné barvy.

@barva: #941f1f; tlačítko ( pozadí: #941f1f + #222222; ohraničení: #941f1f - #111111; )
Výše uvedená operace na pozadí zvýší každou hodnotu HEX o 2. Výsledkem bude „B64141″ – světlejší verze původní barvy. Operace snímku sníží každou HEX hodnotu o 1 a vytvoří více tmavá barva: „830E0E“.
V praxi existuje mnoho případů, kdy začínáme základní barvou a potřebujeme její mírně ztmavenou nebo zesvětlenou verzi.

@color-button: #d24444; input.submit ( color:#fff; background:@color-button; border:1px solid @color-button - #222; padding:5px 12px; )
Tento kód vytvoří červené tlačítko s mírně ztmaveným okrajem. To je běžná situace a identifikace pouze jedné barvy je velkou pomocí.

Síla proměnných je zjevnější v následujícím. Pokud chcete změnit barvu tlačítka, změňte hodnotu @color-button na zelený, změní nejen barvu pozadí, ale také nahradí tah tmavší verzí zelené.

Dalším skvělým využitím je vytváření přechodů. Většinou volím střední barvu a podle toho deklaruji gradient. Začátek trochu zesvětlím a konec trochu ztmavím. Výsledkem bude pěkný přechod, něco takového:

@color: #faa51a; .button ( pozadí: -webkit-gradient(lineární, vlevo nahoře, vlevo dole, from(@color + #151515), to(@color - #151515)); background: -moz-linear-gradient(top, @color + #151515, @color - #151515 )

Barevné funkce Existuje mnoho více možností pro práci s barvou; LESS vám umožňuje s nimi manipulovat úroveň odkazu. Barvy můžete zesvětlit, ztmavit, nasytit, desaturovat a otočit. Podívejte se na následující příklady s obrázky, abyste pochopili, co každý z nich dělá.

@color: #3d82d1; .left_box ( background:lighten(@color, 20%); ) .right_box ( background:darken(@color, 20%); )

@color: #3d82d1;.left_box ( background: desaturate(@color, 18%); ) .middle_box ( background: @color; ) .right_box ( background: saturate(@color, 18%); )

@color: #3d82d1;.left_box ( background: spin(@color, 25%); ) .middle_box ( background: @color; ) .right_box ( background: spin(@color, -25%); )

Získávání informací o barvách Každá barva v LESS je převedena na HSL (odstín, sytost, světlost), abyste měli kontrolu nad úrovněmi kanálu. To umožňuje jemnější manipulaci s barvami a přímé získávání informací o barvách.

@barva = #167e8a; odstín(@barva); sytost(@barva); lehkost(@barva);
To se může zdát příliš malicherné - proč potřebujeme tyto informace, když můžeme zadat pouze hodnotu HEX? Pokud jste normální člověk, pak HEX barvu hned tak nerozluštíte. HEX hodnoty představují spektrum RGB: první dva znaky řídí množství červené, další dva řídí množství zelené a poslední dva řídí množství modré.
Je docela zřejmé, že #ff0000 je červená, protože je to RGB(255,0,0). Tóny červené, žádná zelená nebo modrá. Pokud však uvidíte #1f6b2d, bude obtížné dekódovat, že je tmavě zelená. V HSL notaci odstín řídí vše, stačilo pojmenovat barvu a zbytek už jen udává tón (není to úplně pravda, ale tak to funguje).
S ohledem na to, pokud najdete dobrou fialovou barvu jako #e147d4, můžete velmi snadno najít různé barvy s přesně stejným odstínem. Řekněme, že chcete vytvořit krémovou, pastelovější verzi #e147d4, můžete udělat toto:

Nová barva bude mít stejný odstín, ale jinou sytost a jas. Výsledkem bude #c480bf, ke kterému je mnohem obtížnější se dostat z #e147d4 pouze pomocí HEX.

Kombinace funkcí LESS vám umožňuje používat funkce v rámci funkcí, takže pokud chcete desaturovat a roztočit barvu, můžete jednoduše:

@color: #c480bd; .class ( background-color: desaturate(spin(@color, 18), 12%);)

Nesting Při psaní CSS používáme kaskádové styly. Chcete-li změnit okraje odstavce pouze uvnitř článku, můžete použít následující kód:

Article.post p( margin: 0 0 12px 0; )
Na tomto přístupu není nic špatného, ​​ale pokud potřebujeme změnit i styl odkazů, uvozovek, nadpisů atp. pouze v rámci článku, budete muset pro každý prvek použít předponu „article.post“. Díky tomu je psaní kódu nudnější a hůře čitelné.
V LESS můžeme tato pravidla vnořit, čímž získáme kratší, logičtější verzi našich stylů. Například:

Article.post ( p( margin: 0 0 12px 0; ) a ( color: red; ) a:hover ( color: blue; ) img ( float:left; ) )
Odsazení není vyžadováno, ale kód je díky tomu čitelnější. Úrovně vnoření nejsou omezeny.

A ( barva:červená; ) p ( okraj: 0px; ) článek ( a ( barva: zelená; ) p ( barva: #555; a ( barva:modrá; ) ) )

Mixins Mixins in LESS vás ušetří psaní zbytečného kódu. Už jste někdy vytvořili zaoblený rám, kde jsou zaoblené pouze horní rohy?

Tab ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-toleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px)
A tak pokaždé... S LESS lze toto vše změnit vytvořením mixinu. Nečistoty jsou opakovaně použitelné prvky, které lze zpravidla přidat do jakéhokoli prvku. A nemusíte se ani učit novou syntaxi.

Rounded_top ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-toleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px ) .tab ( background: #333; color:#fff; .rounded_top; ) .submit ( .rounded_top; )
Ve výše uvedeném kódu jsme definovali prvek .rounded_top pro zaoblení horních rohů. Když jej přidáme do jakéhokoli jiného prvku jako mixin (viz .tab), v podstatě importujeme pravidla, která jsme pro něj vytvořili. Díky této syntaxi můžeme jako mixin použít jakýkoli prvek.

Rounded_top ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-toleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; ) .tab ( background: #333; color:#fff; .rounded_top; ) .submit ( .tab; background: red; )
Styly pro prvek .submit jsou zaoblené rohy nahoře, bílý a červené pozadí (přepsána hodnota #333).

Mixiny s parametry Mixiny s parametry, zní složitě, problém velmi řeší jednoduchým způsobem. Ve výše uvedených příkladech jste viděli, jak můžeme definovat prvek s poloměrem 6px v horních rozích. Co když chceme vytvořit prvek s poloměrem 3px? Měli bychom deklarovat různé mixiny pro všechny hodnoty pixelů? Samozřejmě odpověď zní ne, musíme použít mixiny s parametry!
Jsou podobné funkcím, protože mohou měnit hodnoty, když jsou volány. Pojďme přepsat příklad s border-radius, abychom viděli, jak to funguje.

Rounded_top(@radius) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border -radius-topright: @radius; border-top-left-radius: @radius-top-right-radius: @radius; .submit ( .rounded_top(3px); )
Ve výše uvedeném kódu je poloměr prvku .tab 6px a prvek .submit bude mít hodnotu 3px.

Standardní hodnoty Pokud obvykle používáte stejný poloměr okraje, ale někdy potřebujete jiný, musíte dát mixinu standardní hodnotu.

Rounded_top(@radius:6px) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz -border-radius-topright: @radius; border-top-left-radius: @border-top-right-radius: @radius: #333; color:#fff; .rounded_top; ) . odeslat ( .rounded_top(3px); )
V tomto příkladu získá .tab výchozí hodnotu 6px a .submit získá výchozí hodnotu 3px.

Více parametrů K identifikaci složitějších nečistot můžete také použít více parametrů.

Radius(@radius:6px) ( -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; ) .button(@radius:3px, @background: #e7ba64, @padding: 4px) ( .radius(@radius); background:@background; border: 1px solid @background - #222; padding: @padding; ) .read_more ( .button(0px); )
V tomto příkladu je class.read_more formátován s odsazením 4px, barva pozadí#e7ba64 a s poloměrem ohraničení 0px.

Použití všech argumentů najednou Další možností při použití argumentů je kombinovat je. Vlastnosti těsnopisu v CSS mají více hodnot zapsaných jednu po druhé.

Div ( border:1px solid #bbb; )
Chcete-li dát všem požadovaným prvkům šedý okraj, můžete použít tuto funkci:

Gray_border(@width: 1px, @type: solid, @color: #bbb)( border:@arguments; ) div ( .grey_border(2px, čárkované); )
@arguments je speciální klíčové slovo, které zobrazuje všechny parametry jeden po druhém v daném pořadí. Výsledkem výše uvedeného kódu LESS bude:

Div ( border:2px přerušované #bbb; )

Parametrické mixiny bez parametrů Můžete také použít parametrické mixiny bez parametrů. To se používá, když nepotřebujete vydávat mixin v CSS, ale chcete, aby jeho pravidla platila pro prvek, ve kterém je použit.

Upozornění ( pozadí: červená; barva: bílá; odsazení: 5px 12px; ) .error_message ( .alert; margin: 0 0 12px 0; )
CSS výše uvedeného kódu bude vypadat takto:

Upozornění ( pozadí: červená; barva: bílá; padding:5px 12px; ) .error_message (pozadí: červená; barva: bílá; odsazení:5px 12px; okraj: 0 0 12px 0; )
Chcete-li třídu .alert skrýt, musíte parametr nastavit na prázdný.

Alert() ( background: red; color: white; padding:5px 12px; ) .error_message ( .alert; margin: 0 0 12px 0; )
Hotové CSS bude vypadat takto:

Error_message ( background: red; color: white; padding: 5px 12px; margin: 0 0 12px 0; )
To se používá hlavně ke zmenšení velikosti souboru CSS.

Jmenný prostor Jmenný prostor v programovacích jazycích se obvykle používá k seskupování prvků podobné funkce. Něco podobného můžeme dosáhnout v LESS kombinací našeho kódu s mixiny.

#my_framework ( p ( margin: 12px 0; ) a ( color:blue; text-decoration: none; ) .submit ( background: red; color: white; padding:5px 12px; ) )
Když začínáte pracovat na novém webu založeném na vašem frameworku, můžete přidat odkaz #my_framework a použít jej bez ucpání jmenného prostoru.

Tlačítko Odeslat ( #my_framework > .submit; )
Také toto skvělý způsob umožňují rychle měnit a upřesňovat témata. Pokud pro svou společnost vyvíjíte několik motivů, pak pro změnu šablon za běhu je můžete všechny umístit do jednoho souboru LESS pomocí balíčků.

#fw_1 ( p ( okraj: 12px 0; ) a ( barva:modrá; výzdoba textu: žádná; ) .submit ( pozadí: červená; barva: bílá; výplň:5px 12px; ) ) #fw_2 ( p ( okraj: 8px 0; ) a ( barva:červená; dekorace textu: podtržení; ) .submit ( pozadí: modrá; barva: bílá; výplň:8px 20px; ) ) .submit_button ( #fw_2 > .submit; )

Řetězcová interpolace Řetězcová interpolace je další oblíbené slovo, které znamená, že tento libovolný řetězec lze uložit do proměnné a poté použít v hodnotě vlastnosti.

@url: "http://mycompany.com/assets/";obrazek-pozadi: url("@(url)/sprite.png");
To může být užitečné při vytváření centralizovaného rámce.

Escapování Někdy je potřeba použít vlastnosti nebo hodnoty, které nejsou platnými CSS (pravidla IE). Možná jste si všimli, že v příkladu o přechodech jsem se nestaral o uživatele Internet Exploreru.
Pokud chcete vytvořit přechod v IE, měli byste udělat něco takového:

Filtr: progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444");
Tento CSS není platný, takže LESS se nezkompiluje. V tomto případě můžete tuto hodnotu ukončit, což umožní LESS ji přeskočit.

Tlačítko ( pozadí: -webkit-gradient(lineární, vlevo nahoře, vlevo dole, from(#666666), to(#444444)); background: -moz-linear-gradient(top, #666666, @color - #444444) ; filtr: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444")";)
Vše, co musíte udělat, je dát sekci do uvozovek a před ni dát vlnovku. Tato sekce neprojde procesorem LESS a nebude vyřazena.

Import Stejně jako u běžných CSS můžete importovat soubory. LESS umožňuje importovat CSS a LESS pomocí následující syntaxe:

@import "reset.min.css"; @import "framework.less"; @import "widgety";
První import je zcela zřejmý. Importuje pravidla CSS definovaná v reset.min.css, aniž by je zpracoval analyzátor LESS.
Druhý import vloží obsah framework.less a bude s ním zacházet jako s ostatními pravidly LESS.
Třetí import funguje stejně jako druhý. Pokud rozšíření není nainstalováno, preprocesor jej považuje za LESS soubor.

Komentáře Samozřejmě, víceřádkové komentáře jsou k dispozici v LESS ve stejné podobě jako v CSS. LESS také umožňuje použití jednořádkových komentářů jako v PHP nebo Javascriptu pomocí dvojitých zpětných lomítek.

/* Toto je můj hlavní soubor LESS.

Řídí, jak vypadá většina webu. /* body ( padding:0px; // Toto resetuje odsazení těla )
co chybí? I když je LESS úžasný, stále existují určité nedostatky, když jej začnete používat, i když nejsou příliš rušivé.

Jednou z funkcí, kterou bych rád viděl, je předběžné zpracování (souhlasím, zní to nesmyslně). Současná metoda neumožňuje použití přechodů s proměnlivými barvami.
Filtr: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#faa51a", endColorstr="#f47a20"");

Tento kód funguje skvěle, ale barvy musí být přesně definovány. Pokud je řádek escapován, pak se proměnné nezpracovávají. Bylo by hezké mít možnost, kde jsou proměnné v uvozených řetězcích zpracovány před odesláním do souboru CSS. Závěr Jako každý nová technologie
nebo se metoda zneužije. Pamatujete si na reflexní loga a skleněná tlačítka na úsvitu éry Webu 2.0?
Nemusíte vnořovat všechna svá pravidla, nemusíte vytvářet proměnné pro všechno nebo mix pouze pro šířku rámce. Pokud nevíte, kdy nevyužít úžasnou sílu LESS, váš kód LESS se stane nečitelným jako běžné CSS a stejně tak náročný na údržbu. Trik je vědět, kdy použít tyto funkce a metody a kdy použít obvyklé staré CSS
Kromě toho nedoporučuji používat soubor LESS. Není na tom nic špatného, ​​ale není důvod načítat MÉNĚ souboru a zpracovávat ho. Scénář je nepochybně velmi rychlý, ale jsem si jistý, že bez něj bude rychlejší. Obvykle vyvíjím všechny své stránky pomocí LESS, vezmu výstupní soubor, komprimuji jej a používám běžný soubor CSS.

Nevědět, co jsou to CSS preprocesory, je v dnešní době pro webdesignera asi ostudný jev. Ale dlouho jsem se nechtěl ponořit do toho, jak to nastavit a používat. Zdálo se mi, že je rychlejší psát css staromódním způsobem, než sedět a ponořit se do něčeho nového (zvlášť s ohledem na to, že uzávěrka je vždy blízko). Ale v poslední době dokonce stále více projektů střední obtížnost provádí pomocí less nebo sass.

Rád bych proto v krátkosti takříkajíc představil, jak pracovat s LESS css preprocesorem. Proč jsem si to pro začátek vybral? Protože jeho syntaxe je stejná jako u běžného css. LESS je doplněk ke css, a pokud jednoduše vložíte běžný kód z css souboru, zkompiluje se úspěšně, zatímco v méně můžete používat proměnné a mixiny (funkce, které výrazně zrychlují zápis např. přechodů nebo vlastností, které vyžadují mnoho opakování s různými předponami).

Tak začněme. Nejprve musíme pochopit, že méně je soubor, který nám po zkompilování poskytne hotové css soubor. Existuje několik způsobů, jak jej zkompilovat. Můžete vytvořit soubor LESS a převést jej pomocí Javascriptu za chodu, když se stránka načte, nebo jej zkompilovat předem a použít výsledný soubor CSS.

Pomocí LESS a souboru Javascript

Nejprve si musíte stáhnout soubor LESS Javascript z webu a propojit ho se stránkou jako jakýkoli jiný js skript.

Poté vytvoříme soubor s příponou .less a svážeme jej pomocí následujícího kódu:

V tomto případě musí být soubor LESS umístěn před souborem JS. Nyní bude soubor LESS fungovat stejně jako běžný CSS.

Kompilace souboru LESS

Tato metoda mě přitahuje více, protože nemusíte načítat MÉNĚ souborů s více připojeními, ale můžete okamžitě načíst předem miniifikovaný jeden css soubor na klienta.
Nejprve musíme nainstalovat NodeJs. Chcete-li to provést, přejděte na oficiální web http://nodejs.org/ a kliknutím na tlačítko instalace se zahájí stahování instalačního souboru pro váš operační systém. Po jeho instalaci nyní musíme nainstalovat kompilátor less, k tomu otevřeme konzolu a zadáme:

Npm instalace -g méně

Nyní jej lze zkompilovat buď ručně přes konzoli. Podrobné pokyny si můžete přečíst na oficiálních stránkách LESS. Buď použijte taskery (o nich si povíme později), nebo pomocí vašeho IDE. Používám PhpStorm s pluginem File Watchers. Nyní, když jsme v něm otevřeli náš projekt, vytvoříme v něm složku, například „zdroj“ nebo „méně“, kam později uložíme naše zdrojové soubory.

Otevřete Předvolby -> Sledování souborů -> Klikněte na „+“ v dolní části okna a vyberte typ souboru, který chcete sledovat méně. Na momentálně, pokud bylo vše provedeno správně, pak i s výchozím nastavením bude naše IDE sledovat méně souborů v projektu a zkompilovat je v reálném čase, když se změní, a umístí je do složky vedle kompilovaného zdrojový soubor. Hlavní věc je ujistit se, že v poli Program je uvedena cesta k kompilátoru less (který jsme nainstalovali do konzole).

Práce s LESS

Konečně se pobavíme a začneme psát MÉNĚ kódu. Jak uvidíte, kód je snadno čitelný a srozumitelný, protože syntaxe je velmi podobná běžnému css, což snižuje překážku vstupu pro vývojáře, aby jej použil.

Proměnné v LESS fungují stejně jako v PHP, JS a většině ostatních programovacích jazyků. Můžete je použít k uložení hodnoty a pak použít proměnné místo hodnoty samotné, kdykoli ji budete potřebovat.

@header-font: Georgia ; h1 , h2 , h3 , h4 ( font-family : @header-font; ) .large ( font-family :@header-font; )

Ve výše uvedeném příkladu deklarujeme proměnnou @header-font a zapíšeme do ní hodnotu „Georgia“. Nyní můžeme tuto proměnnou použít, kdykoli chceme nainstalovat písmo Georgia. Pokud se rozhodneme, že pro naše hlavičky se lépe hodí Trebuchet MS, pak nebudeme muset prohlížet celý soubor, jednoduše změníme hodnotu proměnné.
Našel jsem skvělé využití proměnných při definování barev stránek. Za starých dobrých časů (které nebyly tak dávno) jsem používal něco takového:

/* Barvy pro můj web #ff9900 - Oranžová - používá se pro odkazy a zvýrazněné položky #cccccc - Světle šedá - používá se pro okraje #333333 - Tmavě černá - Používá se pro tmavé pozadí a barvu textu nadpisu #454545 - Středně černá - Používá se pro obecný text barva */ tělo ( pozadí : #333333 ; barva : #454545 ; ) a ( barva : #ff9900 ; ) barva : #333333 ;

)
S LESS můžeme upravovat a dokumentovat naše pracovní postupy zároveň.

/* Barvy pro můj web */ @color-orange: #ff9900 ; @color-grey_light: #cccccc ; @color-black_dark: #333333 ; @color-black_medium: #454545 ; tělo ( pozadí : @color-black_dark; color : @color-black_medium; ) a (color :@color-orange; ) h1 , h2 , h3 , h4 , h5 , h6 (color : @color-black_dark; ) Variabilní rozsah

Rozsah proměnných popisuje místa, kde jsou přístupné. Pokud definujete proměnnou na samém začátku souboru LESS, bude dostupná pro jakýkoli kód napsaný za ní.
Můžete také definovat proměnnou uvnitř pravidla CSS. V tomto případě nebudou proměnné dostupné mimo toto pravidlo, lze je použít lokálně.

a ( @color : #ff9900 ; color :@color; ) tlačítko ( background : @color; )

V tomto příkladu nebude LESS převedeno kvůli chybě @color není definována pro použití uvnitř prvku tlačítka. Pokud je proměnná deklarována mimo prvek a uvnitř jiného prvku, bude přístupná pouze lokálně.

@barva: #222222 ; a ( @color : #ffffff ; color :@color; ) tlačítko ( background : @color; ) Proměnné v rámci proměnných

Pokud jste kódovali v PHP, pak víte, že můžete deklarovat název proměnné v jiné proměnné.

@color-chirstmas_red: #941 f1f ; @name-of-color: "color-chirstmas_red" ; barva : @@název-barvy ;

Osobně to moc nepoužívám, protože proměnné v proměnných jsou bez uzávěrů téměř k ničemu, ale jsem si jistý, že se najdou chytré příklady použití.

Konstanty a proměnné

Je důležité si uvědomit, že na rozdíl od toho, co jste právě četli, jsou proměnné v LESS spíše konstanty. To znamená, že je lze na rozdíl od proměnných definovat pouze jednou.

Operace

Pomocí operací v LESS můžete dosáhnout neuvěřitelně přesné kontroly. Myšlenka je jednoduchá:

.button ( @jednotka : 3 px; ohraničení :@jednotka plná #ddd ; výplň : @jednotka * 3 ; okraj : @jednotka * 2; )

Výše uvedený kód nastavuje proměnnou @unit na 3px. Tuto hodnotu pak nastavíme na šířku rámečku, výplň na trojnásobek této šířky a okraj na dvojnásobek této šířky.
Můžete použít operace násobení, dělení, sčítání a odčítání. Chcete-li vytvořit blok s okrajem, který zvětšuje šířku stran ve směru hodinových ručiček, můžete použít následující kód:

.box ( @base_unit : 1 px; border : @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3 ) Správa barev

Moje oblíbená funkce LESS je správa barev. Můžete použít operace pro míchání barev a několik speciálních funkcí pro práci s barvami.

Barevné operace

Pokud chcete změnit hodnotu barvy, můžete tak učinit odečtením nebo přidáním jiné barvy.

@barva: #941 f1f ; tlačítko ( pozadí : #941f1f + #222222 ; ohraničení : #941f1f - #111111 ; )

Výše uvedená operace na pozadí zvýší každou hodnotu HEX o 2. Výsledkem bude „B64141″ – světlejší verze původní barvy. Operace ohraničení sníží každou hodnotu HEX o 1 a vytvoří tmavší barvu: „830E0E“.
V praxi existuje mnoho případů, kdy začínáme základní barvou a potřebujeme její mírně ztmavenou nebo zesvětlenou verzi.

@color-button: #d24444 ; input .submit ( color :#fff ; background :@color-button; border :1 px solid @color-button - #222 ; padding :5 px 12 px; ) Barevné funkce

Možností pro práci s barvou je mnohem více; LESS vám umožňuje s nimi manipulovat na úrovni odkazu. Barvy můžete zesvětlit, ztmavit, nasytit, desaturovat a otočit. Podívejte se na následující příklady s obrázky, abyste pochopili, co každý z nich dělá.

@color: #3 d82d1 ; .left_box ( background :lighten(@color, 20%) ; ) .right_box ( background :darken(@color, 20%) ; ) Nesting

Při psaní CSS používáme kaskádové styly. Chcete-li změnit okraje odstavce pouze uvnitř článku, můžete použít následující kód:

článek .post p ( okraj : 0 0 12 px 0; )

Na tomto přístupu není nic špatného, ​​ale pokud potřebujeme změnit i styl odkazů, uvozovek, nadpisů atp. pouze v rámci článku, budete muset pro každý prvek použít předponu „article.post“. Díky tomu je psaní kódu nudnější a hůře čitelné.
V LESS můžeme tato pravidla vnořit, čímž získáme kratší, logičtější verzi našich stylů. Například:

Article.post ( p( margin: 0 0 12px 0; ) a ( color: red; ) a:hover ( color: blue; ) img ( float:left; ) )

Odsazení není vyžadováno, ale kód je díky tomu čitelnější. Úrovně vnoření nejsou omezeny.

A ( barva:červená; ) p ( okraj: 0px; ) článek ( a ( barva: zelená; ) p ( barva: #555; a ( barva:modrá; ) ) )

Mixins

Mixiny v LESS vám ušetří psaní zbytečného kódu. Už jste někdy vytvořili zaoblený rám, kde jsou zaoblené pouze horní rohy?

.tab ( -webkit-border-top-left-radius : 6 px; -webkit-border-top-right-radius : 6 px; -moz-border-radius-topleft : 6 px; -moz-border-radius- topright : 6 px border-top-left-radius : 6 px; border-top-right-radius : 6 px;

A tak pokaždé... S LESS lze toto vše změnit vytvořením mixinu. Nečistoty jsou opakovaně použitelné prvky, které lze zpravidla přidat do jakéhokoli prvku. A nemusíte se ani učit novou syntaxi.

Rounded_top ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-toleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px ) .tab ( background: #333; color:#fff; .rounded_top; ) .submit ( .rounded_top; )

Ve výše uvedeném kódu jsme definovali prvek .rounded_top pro zaoblení horních rohů. Když jej přidáme do jakéhokoli jiného prvku jako mixin (viz .tab), v podstatě importujeme pravidla, která jsme pro něj vytvořili. Díky této syntaxi můžeme jako mixin použít jakýkoli prvek.

Rounded_top ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-toleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; ) .tab ( background: #333; color:#fff; .rounded_top; ) .submit ( .tab; background: red; )

Styly pro prvek .submit jsou zaoblené rohy nahoře, bílá barva a červené pozadí (přepsána hodnota #333).

Mixiny s parametry

Zatímco mixiny parametrů zní složitě, řeší problém velmi jednoduchým způsobem. Ve výše uvedených příkladech jste viděli, jak můžeme definovat prvek s poloměrem 6px v horních rozích. Co když chceme vytvořit prvek s poloměrem 3px? Měli bychom deklarovat různé mixiny pro všechny hodnoty pixelů? Samozřejmě odpověď zní ne, musíme použít mixiny s parametry!
Jsou podobné funkcím, protože mohou měnit hodnoty, když jsou volány. Pojďme přepsat příklad s border-radius, abychom viděli, jak to funguje.

Rounded_top(@radius) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border -radius-topright: @radius; border-top-left-radius: @radius-top-right-radius: @radius; .submit ( .rounded_top(3px); )

Ve výše uvedeném kódu je poloměr prvku .tab 6px a prvek .submit bude mít hodnotu 3px.

Standardní hodnoty

Pokud obvykle používáte stejný border-radius, ale někdy potřebujete jiný, musíte nastavit mixin na standardní hodnotu.

Rounded_top(@radius:6px) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz -border-radius-topright: @radius; border-top-left-radius: @border-top-right-radius: @radius: #333; color:#fff; .rounded_top; ) . odeslat ( .rounded_top(3px); )

V tomto příkladu získá .tab výchozí hodnotu 6px a .submit získá výchozí hodnotu 3px.

Více možností

K identifikaci složitějších nečistot můžete také použít více parametrů.

Radius(@radius:6px) ( -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; ) .button(@radius:3px, @background: #e7ba64, @padding: 4px) ( .radius(@radius); background:@background; border: 1px solid @background - #222; padding: @padding; ) .read_more ( .button(0px); )

V tomto příkladu je class.read_more formátován s odsazením 4px, barvou pozadí #e7ba64 a poloměrem ohraničení 0px.

Použití všech argumentů najednou

Další možností při použití argumentů je jejich kombinování. Vlastnosti těsnopisu v CSS mají více hodnot zapsaných jednu po druhé.

div ( okraj :1 px solid #bbb; )

Chcete-li dát všem požadovaným prvkům šedý okraj, můžete použít tuto funkci:

Gray_border(@width: 1px, @type: solid, @color: #bbb)( border:@arguments; ) div ( .grey_border(2px, čárkované); )

@arguments je speciální klíčové slovo, které zobrazuje všechny parametry jeden po druhém v daném pořadí. Výsledkem výše uvedeného kódu LESS bude:

div ( border :2 px přerušované #bbb ; ) Parametrické mixiny bez parametrů

Můžete také použít parametrické mixiny bez parametrů. To se používá, když nepotřebujete vydávat mixin v CSS, ale chcete, aby jeho pravidla platila pro prvek, ve kterém je použit.

Upozornění ( pozadí: červená; barva: bílá; odsazení: 5px 12px; ) .error_message ( .alert; margin: 0 0 12px 0; )

CSS výše uvedeného kódu bude vypadat takto:

.alert ( pozadí : červená; barva : bílá; výplň :5 px 12 px; ) .error_message ( pozadí : červená; barva : bílá; výplň :5 px 12 px; okraj : 0 0 12 px 0 ; )

Chcete-li třídu .alert skrýt, musíte parametr nastavit na prázdný.

Alert() ( background: red; color: white; padding:5px 12px; ) .error_message ( .alert; margin: 0 0 12px 0; )

Hotové CSS bude vypadat takto:

.error_message ( pozadí : červená; barva : bílá; výplň : 5 px 12 px; okraj : 0 0 12 px 0 ; )

To se používá hlavně ke zmenšení velikosti souboru CSS.

Jmenný prostor

Jmenné prostory v programovacích jazycích se obvykle používají k seskupování prvků s podobnou funkčností. Něco podobného můžeme dosáhnout v LESS kombinací našeho kódu s mixiny.

#my_framework ( p ( margin: 12px 0; ) a ( color:blue; text-decoration: none; ) .submit ( background: red; color: white; padding:5px 12px; ) )

Když začínáte pracovat na novém webu založeném na vašem frameworku, můžete přidat odkaz #my_framework a použít jej bez ucpání jmenného prostoru.

Tlačítko Odeslat ( #my_framework > .submit; )

Je to také skvělý způsob, jak rychle měnit a upravovat témata. Pokud pro svou společnost vyvíjíte několik motivů, pak pro změnu šablon za běhu je můžete všechny umístit do jednoho souboru LESS pomocí balíčků.

#fw_1 ( p ( okraj: 12px 0; ) a ( barva:modrá; výzdoba textu: žádná; ) .submit ( pozadí: červená; barva: bílá; výplň:5px 12px; ) ) #fw_2 ( p ( okraj: 8px 0; ) a ( barva:červená; dekorace textu: podtržení; ) .submit ( pozadí: modrá; barva: bílá; výplň:8px 20px; ) .submit_button ( #fw_2 > .submit; )

Díky tomu získáváme možnost urychlit psaní layoutu našeho projektu pomocí předem připravených vlastních mixinů nebo frameworku. Navíc s menším používáním se řádově zvýší čitelnost, struktura a logika vašich stylů, což v budoucnu zlepší podporu stránek.

Pokud vezmeme v úvahu preprocesory společně s CSS, získáme jasnější obrázek, než kdybychom uvažovali koncept preprocesoru samostatně.

Definice

CSS preprocessor (z anglického CSS preprocessor) je doplněk ke CSS, který se přidává dříve nedostupné příležitosti pro CSS pomocí nových syntaktických konstrukcí.

Hlavním úkolem preprocesoru je poskytnout pohodlné syntaktické struktury pro vývojáře, které zjednoduší, a tím urychlí vývoj a podporu stylů v projektech.

Preprocesory CSS převádějí kód napsaný pomocí jazyka preprocesoru na čistý a platný kód CSS.

S preprocesory můžete psát kód, který cílí na:

• Lidská čitelnost
• Strukturované a logické
• Výkon

A to je jen malá část toho, co vám preprocesor může poskytnout. Ale nepředbíhejte.

Syntaktický cukr

Než se podíváme dále na preprocesory CSS, aktualizujme náš slovník o nový koncept: syntaktický cukr.

Syntaktický cukr (z anglického syntactic sugar) jsou doplňky k syntaxi programovacího jazyka, které nepřinášejí žádné významné změny nebo nové funkce, ale činí jazyk pro člověka čitelnějším.

Syntaktický cukr zavádí do jazyka alternativní možnosti záznamy staveb vložené do tohoto jazyka. Alternativními možnostmi nahrávání rozumíme kratší nebo pro člověka pohodlnější konstrukce, které nakonec preprocesor převede do zdrojového jazyka, bez syntaktického cukru.

Pokud se pokusíme tento koncept aplikovat na CSS preprocesory, pak v obecném případě zcela popisuje jejich podstatu. Ještě jednou připomenu, že hlavním úkolem preprocesorů je zjednodušit a urychlit vývoj, ale jak jinak to lze udělat, když nezavedete alternativní možnosti nahrávání?

Jaké typy CSS preprocesorů existují?

Je čas přejít ke konkrétnějším příkladům, konkrétně k samotným CSS preprocesorům. V době psaní tohoto článku existují tři populární preprocesory:

• sass (SCSS)
• Stylus

A pár menších hráčů pro nás:

• Uzavření stylů
• CSS Crush

O prvních třech budeme hovořit samostatně o něco níže, ale o posledních dvou nebudeme mluvit vůbec, kvůli jejich neoblíbenosti. V případě potřeby lze popisy těchto preprocesorů snadno najít ve vyhledávači.

Jaký má smysl používat preprocesory?

Jak jsem poznamenal výše, hlavními výhodami jsou čitelnost kódu, strukturování a zvýšená produktivita.

Existují i ​​další důvody, proč dnes začít používat preprocesor. Chci na to upozornit, protože vývojáři v minulosti a mnozí i nyní odmítají používat preprocesory a považují je za složité, nepochopitelné a zbytečné.

CSS je těžké

Standardní CSS je obtížné. Nevnořovaná syntaxe, kterou CSS preprocesory nabízejí, je prostě těžko čitelná. Při vnořování si navíc musíte pamatovat jméno rodiče. Nedostatek normálních proměnných a "funkcí" dělá CSS kód chaotický a úzkoprsý.

Dostupná dokumentace

Pryč jsou doby, kdy dokumentace z preprocesorů byla dostupná pouze lidem „znalým“. Nyní může kdokoli ovládat kterýkoli z preprocesorů v co nejkratším čase as ním minimální náklady pevnost

Snadné použití

Použití preprocesorů je jednodušší než dříve a mnohem jednodušší. K tomu stačí nainstalovat program, který bude sledovat soubory určené pro preprocesor, a když se změní, obsah těchto souborů zkompiluje do čistého CSS kódu.

Pro pokročilejší uživatele existují speciální tvůrci projektů. Nemyslete si, že jen proto, že používáte preprocesorový program spíše než tvůrce projektu, nejste dostatečně cool. Ve skutečnosti takové faucety nabízejí plnou kontrolu a pokročilá nastavení, ale neudělají z vás Jediho.

Struktura a konzistence kódu

Nejoblíbenější funkcí, kterou nabízí jakýkoli preprocesor CSS, je schopnost vnořovat selektory do sebe. Nebudu nyní uvádět příklad, protože odpovídající část knihy bude napsána o schopnostech Less, včetně vnořování. V tuto chvíli byste měli vědět pouze to, že při použití preprocesorů můžete jeden selektor vnořit do druhého a další do druhého, což má za následek něco podobného jako obsah knihy:

1. Volič rodiče 1.1. Vnořený volič 1.2. Vnořený volič 1.2.1. Vnořený volič 1.3. Vnořený volič

Samozřejmě, v reálném životě nemohou selektory začínat čísly, nicméně pro vytvoření paralely mezi vnořením a obsahem si myslím, že takové vynechání je zde na místě.

Nečistoty

Velmi stručně řečeno, pomocí mixinů (z anglického Mixins) můžete kód učinit opakovaně použitelným. To pomáhá vyhnout se pomocným třídám při označování nebo duplikaci vlastností od selektoru k selektoru.

Modularita

Dalším bonusem, který by mě přesvědčil, abych začal používat CSS preprocesor právě teď, by byla možnost vnořovat soubory do souborů, tedy jinými slovy spojovat soubory v dané sekvenci. Ano, dá se to zařídit čisté CSS, ale ve spojení s dalšími funkcemi se ukazuje jako velmi mocný nástroj.

Zároveň dostáváme možnost sdílet moduly (knihovny mixin), které jsme vytvořili pro naše potřeby a shledali užitečné pro další lidi. Ukázalo se, že každý vývojář si může stáhnout vaši knihovnu a používat ji pro své vlastní účely, přičemž podle potřeby volá vámi napsané mixiny.

Proč nepočkat, až se CSS vyvine?

Vývoj CSS jde velmi malými a nejistými kroky, protože W3C upřednostňuje rychlost odezvy CSS (výkon). Na jednu stranu je to správné a velmi důležité, na druhou stranu je to nedostatek pohodlí pro vývojáře.

Jako příklad použiji jednu ze specifikací CSS4, která byla zavedena pod tlakem vývojářů – rodičovský selektor. Tak dlouhá cesta od nápadu k rozhodnutí byla způsobena tím, že W3C považovalo takový selektor za pomalý a jeho další použití na stránkách by vedlo k divokým zpomalením. Samozřejmě mluvíme o širokém použití tohoto selektoru a ne o ojedinělých případech.

Nečekejte tedy v blízké budoucnosti revoluce a změny, které by mohly zastínit funkčnost a schopnosti CSS preprocesorů.

Typy preprocesorů

Samozřejmě, stejně jako v každé jiné oblasti, vždy existuje konkurence a na trhu s preprocesory nyní existují tři hlavní, válčící tábory:

• sass (SCSS)
• Stylus

Říkám jim nepřátelské, protože každý přívrženec jednoho z preprocesorů považuje za svou povinnost házet nečistoty na představitele jiných, řekněme, vyznání. Toto nepřátelství je zvláště běžné mezi amatéry. Sass preprocesor, který je považován za nejstarší a nejvýkonnější ze všech tří preprocesorů.

Chcete-li získat úplný obrázek, chci poskytnout stručné informace pro každý preprocesor:

Méně

Vlastně hrdina této knihy. Nejoblíbenější preprocesor v době psaní článku. Založena v roce 2009 Alexisem Sellierem a napsaná v JavaScriptu (původně v Ruby, ale Alexis udělala správný krok ve správný čas). Má všechno základní schopnosti preprocesory a ještě více, ale nemá podmíněné konstrukce a cykly v našem obvyklém chápání. Hlavní výhodou je jeho jednoduchost, téměř standardní syntaxe pro CSS a možnost rozšíření funkčnosti prostřednictvím systému pluginů.

sass (SCSS)

Nejvýkonnější z CSS preprocesorů. Má poměrně velkou komunitu vývojářů. Založen v roce 2007 jako modul pro HAML a napsaný v Ruby (existuje port na C++). Ve srovnání s Less má mnohem větší rozsah schopností. Možnosti samotného preprocesoru rozšiřuje multifunkční knihovna Compass, která umožňuje jít dál CSS framework a pracovat například se sprajty v automatickém režimu.

Má dvě syntaxe:

• Sass (Syntactically Awesome Style Sheets) – zjednodušené Syntaxe CSS, která je založena na identifikaci. Považováno za zastaralé.
• SCSS (Sassy CSS) – vychází ze standardní syntaxe CSS.

Stylus

Nejmladší, ale zároveň nejperspektivnější CSS preprocesor. V roce 2010 ji založila v našich kruzích známá osobnost TJ Holowaychuk. Říká se, že se jedná o nejpohodlnější a nejrozšiřitelnější preprocesor a je také flexibilnější než Sass. Napsáno v JavaScriptu. Podporuje mnoho možností syntaxe od CSS až po zjednodušené (chybí: , ; , () a některé závorky).

Pro zjednodušení života designéra rozložení bylo vynalezeno dostatečné množství frameworků a doplňků. Nyní si povíme něco o zjednodušení a zrychlení psaní stylů pro weby. Jak víte, používají se k tomu kaskádové styly CSS.

LESS je nadmnožina CSS. LESS je programovatelné CSS. LESS se rozšiřuje Dynamické CSS schopnosti, jako jsou proměnné, mixiny a operace.

Abyste mohli začít psát styly v LESS, stačí znalost CSS, nemusíte se učit nic nového. Proto je bariéra vstupu do tohoto jazyka velmi nízká.

Jak přejít na LESS?

Protože LESS používá syntaxi CSS, znamená to, že stávající CSS je již platné LESS. Pro pohodlnější použití hotové CSS v LESS můžete využívat online služby CSS konverze za MÉNĚ:

Po převedení stylů na LESS vytvořte odpovídající soubor s příponou .less, například style.less .

Používání

Neuvažoval jsem o možnosti průběžné kompilace, protože doba načítání stránky se zpočátku prodlužuje. Proto je lepší převádět ručně pomocí vhodných aplikací nebo pluginů:

• Winless (OS: Windows)
• LESS CSS Compiler (IDEA pluginy)

Pokud používáte vývojové prostředí IDEA, doporučuji použít plugin. Když ztratíte zaměření programu, bude do css zkompilováno méně, to je velmi pohodlné :)

Jakmile pochopíte, jak pracovat s LESS, můžete přejít k hlavním funkcím jazyka, kvůli kterým stojí za to jej používat:

Proměnné

Proměnné umožňují definovat trvale používané hodnoty na jednom místě a poté je znovu použít kdekoli v šabloně stylů, což usnadňuje přidávání globální změny Doslova až do změny jednoho řádku kódu.

MÉNĚ @barva: #4D926F; #header ( barva: @color; ) h2 ( barva: @color; ) CSS #header ( barva: #4D926F; ) h2 ( barva: #4D926F; ) Mixiny

Mixiny umožňují zahrnout všechny vlastnosti třídy do jiné třídy pomocí jednoduché zapínání název třídy jako hodnotu jedné z vlastností.

LESS .box-sizing(@a: border-box) ( box-sizing: @a; -webkit-box-sizing: @a; -moz-box-sizing: @a; ) .wrapper ( box-sizing; ) CSS .wrapper ( box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; ) Vnořená pravidla

Místo vytváření dlouhých názvů selektorů k označení dědičnosti můžeme v Less jednoduše vnořit selektory do jiných selektorů. Díky tomu je dědičnost srozumitelnější a šablony stylů kratší.

MÉNĚ .content ( a ( text-decoration: none; &:hover (text-decoration: underline; ) ) ) CSS .content a (text-decoration: none; ) .content a:hover ( text-decoration: underline; ) Operace

Operace umožňují zvyšovat, zmenšovat, dělit a násobit hodnoty vlastností i barvy, což umožňuje specifikovat složité vztahy mezi vlastnostmi. Docela pohodlné při nastavování rozměrů pro proporcionální bloky. Například hlavní část webu a postranní panel.

méně apokalyptický pohled na budoucnost

ne tak pesimistické názory na budoucnost

Spravedlivé dědictví není o nic méně příjemné než spravedlivá manželka.

Pěkné dědictví není o nic méně příjemné než hezká manželka. ☰

Doprava je jedním z méně příjemných aspektů městského života.

Dopravní zácpy jsou jednou z nejméně příjemných stránek městského života. ☰

Obrys byl stále méně zřetelný světlo vybledlý.

Obrysy byly stále méně jasné, zatímco světlo postupně sláblo. ☰

Komunita požaduje méně agresivní styl policejní práce.

Komunita požaduje méně agresivní styl vymáhání práva. ☰

Pokud se chcete dožít vysokého věku, jezte méně a více cvičte.

Pokud se chcete dožít vysokého věku, jezte méně a více cvičte. ☰

Zadní pohled na hotel byl ještě méně přitažlivý než přední.

Zezadu vypadal tento hotel ještě méně atraktivně než zepředu. ☰

Premiéru dirigoval neméně významný osobnost než Wilhelm Furtwangler.

Dirigentem premiéry nebyl nikdo jiný než sám slavný Wilhelm Furtwängler. ☰

Systém selhává nejkatastrofálněji mezi méně akademickými dětmi.

Tento systém je absolutně nevhodný pro děti, které neinklinují ke studiu. ☰

"Půjdeš prosím se mnou?" Byla to méně žádost než příkaz.

Pojď se mnou, prosím. - Nebyla to ani tak žádost, jako rozkaz. ☰

Jak roky plynuly, zdálo se, že se o svou pověst staral méně a méně.

Postupem času se začalo zdát, že mu na vlastní pověsti záleží stále méně. ☰

Premiéry se zúčastnila neméně osobnost než samotný prezident.

Premiéry se dokonce nezúčastnil nikdo, ale sám prezident, osobně. ☰

Lidé, kteří mohou vykonávat určitou kontrolu nad svým okolím, pociťují menší úzkost.

Člověk, který může vykonávat určitou kontrolu nad svým prostředím, se cítí méně úzkostný. ☰

Odcházející lidé jsou náladovější a méně znepokojení sociální situací.

Společenští lidé jsou veselejší a méně úzkostliví sociální problémy. ☰

Když ztratila svůj vzhled (= stala se méně atraktivní), bylo pro ni těžké sehnat práci.

Jak ztratila svůj vzhled (tj. stala se méně atraktivní), bylo pro ni velmi obtížné získat práci. ☰

Průzkumy ukazují, že voliči jsou stále méně spokojeni se současnou vládou.

Průzkumy ukazují, že voliči jsou stále více nespokojeni se současnou vládou. ☰

Nemohl jsem se o ni méně starat.

Méně by mi mohlo záležet na tom, čemu věříte. *

Je mi fuk, co si myslíš. ☰

Menší Wain

Méně tvé omáčky, děvče!

Méně drzosti, děvče moje! ☰

Ze dvou zel si vyberte to menší.

Ze dvou zel si vyberte to menší. (poslední) ☰

Všechno maso se prodává méně než kosti.

Veškeré maso se prodává bez kostí. ☰

Chodí méně, než by měla.

Chodí méně, než by měla.