Domov › Telefon › Méně souborů. MENŠÍ zastoupení. CSS je těžké

Méně souborů. MENŠÍ zastoupení. CSS je těžké

Použití vlastnosti Velikost pole pro číselná pole v Přístupové tabulky Můžete regulovat prostor obsazený záznamy v databázi. Velikost textových polí lze také změnit, i když efekt z hlediska úspory místa není tak patrný.

Poznámka: Funkce popsané v tomto článku se nevztahují na webové aplikace nebo webové databáze Accessu.

V tomto článku Výsledek změny velikosti pole

Velikost můžete změnit jako prázdné pole a pole, které již obsahuje data. Účinek změny velikosti pole závisí na tom, zda obsahuje data.

Pokud pole neobsahuje žádná data Změna velikosti pole nastavuje limit velikosti nových hodnot v tomto poli. U číselných polí velikost přesně definuje objem místo na disku, použitý Přístupová aplikace pro uložení každé hodnoty odpovídajícího pole. U textových polí určuje velikost pole maximální množství místa na disku, které může Access přidělit pro každou hodnotu v tomto poli.

Pokud pole obsahuje data Když změníte velikost pole, Access zkrátí všechny hodnoty v poli, které přesahují daná velikost a také omezuje velikost nových datových hodnot v poli, jak je popsáno výše.

Změna velikosti číselného pole

rada:

Konstruktér.

V oblasti Vlastnosti pole na kartě Obecné velikost pole. Můžete vybrat jednu z níže uvedených hodnot.

Bajt – pro celá čísla od 0 do 255. Pro uložení je vyžadován 1 bajt.

Celé číslo – pro celá čísla od -32768 do +32767 Vyžaduje 2 bajty pro uložení.

Long Integer – pro celá čísla od -2,147,483,648 do +2,147,483,647 Vyžaduje 4 bajty pro uložení.

Tip: Datový typ Long Integer by se měl použít při vytváření cizího klíče k přidružení pole k poli primární klíč jinou tabulku, která má datový typ "Počítadlo".

Jednoduchá pohyblivá řádová čárka - pro čísla s pohyblivou řádovou čárkou od -3,4 x 1038 do +3,4 x 1038, která mají až 7 platných číslic. Úložiště vyžaduje 4 bajty.

Dvojitá pohyblivá řádová čárka - pro čísla s pohyblivou řádovou čárkou od -1,797 x 10308 do +1,797 x 10308, která mají až 15 platných číslic. Úložiště vyžaduje 8 bajtů.

Replikační kód – pro GUID požadovaný pro replikaci.

Poznámka: Replikace není podporována pro soubory formátu ACCDB.

Skutečné číslo- pro číselné hodnoty od -9,999... x 1027 do +9,999... x 1027. K uložení je potřeba 12 bajtů.

Změna velikosti textového pole

Tip: Pokud pole, jehož velikost chcete změnit, již obsahuje data, doporučujeme je vytvořit záložní kopie základny.

V navigačním podokně klikněte na klikněte pravým tlačítkem myší nad tabulkou obsahující pole, které chcete změnit, a vyberte Návrh.

V mřížce Návrh tabulky vyberte pole, jehož velikost chcete změnit.

V oblasti Vlastnosti pole na kartě Obecné zadejte nová velikost pole jako hodnotu vlastnosti Velikost pole. Zadejte hodnotu mezi 1 a 255. Toto číslo určuje maximální množství znaky obsažené v každé hodnotě. Pro velká pole použijte datový typ Memo (Dlouhý text v Accessu 2016).

Poznámka: Pro data v textová pole(v Accessu 2016 - "Krátký text") Přístup není vyhrazen více prostoru, než je nutné k uložení skutečných hodnot. Vlastnost Velikost pole určuje velikost maximální hodnota pole.

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 udělat si v tomto jazyce pořádek a udělat jej užitečnějším používáním dynamické CSS pomocí 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 kódování a logiky v CSS, aby toho bylo více mocný 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ý MÉNĚ, ale doplňkové prvky LESS nebude fungovat jednoduché 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. Možnost modulárního psaní stylů vám ušetří spoustu starostí Jak používat LESS Existují dva způsoby pomocí LESS. Můžete vytvořit soubor LESS a převést jej, když Nápověda Javascript za běhu nebo si jej předem zkompilujte a použijte výsledný CSS soubor. Nebojte se slova "kompilovat" (používám ho pořád), je to velmi jednoduché Use LESS and Javascriptový soubor Nejprve si musíte stáhnout soubor Javascript z webu LESS a propojit ho se stránkou jako jakýkoli 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í.
Uvnitř můžete také definovat proměnnou CSS pravidla. 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, protože barva chyby 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 téměř 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 existují chytré příklady pomocí tohoto.

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 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: 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. Tento běžná situace a definování 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 barva 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);
Může se to zdát jako hodně detailů – 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 ji velmi snadno najít různé barvy s úplně 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%);)

Hnízdění během 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. Museli jste někdy tvořit zaoblený rám ve kterém pouze horní rohy zaoblený?

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.

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ěď je 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; )
Zeptat se všech potřebné prvkyšedý okraj, můžete použít funkci jako je tato:

Gray_border(@width: 1px, @type: solid, @color: #bbb)( border:@arguments; ) div ( .grey_border(2px, čárkované); )
@arguments to je zvláštní klíčové slovo, který zobrazí 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é nečistoty 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; )
Toho se používá hlavně ke snížení Velikost CSS soubor.

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ší módní slovo, které znamená toto 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 Web 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.

CSS je výkonné a zajímavý jazyk stylování stránky. Je rychlý a srozumitelný, ale hlavně ho v minimální verzi podporují úplně všechny prohlížeče, ať už malé mobilní zařízení nebo velké televizory.

Přes všechny své nepochybné výhody má však CSS některé, ani ne nevýhody, ale omezení. Tato omezení nejsou kritická, ale mohou výrazně prodloužit dobu vývoje projektu.

O jaké omezení se může jednat? Například barva. Pokud vidíme položku jako #FF9F94, pak není možné okamžitě zjistit, že to znamená tmavě broskvovou barvu. Mnohem jednodušší je vytvořit proměnnou, například darkPeach , přiřadit jí hodnotu #FF9F94 a následně tuto proměnnou použít v šabloně stylů. Jaké vymoženosti to může přinést: nemusíte si pamatovat kód barvy, abyste jej mohli označit na jiném místě, abyste změnili jednu barvu v tabulce, stačí změnit hodnotu proměnné.

Jinými slovy, CSS postrádá trochu programování a logiky, aby byla práce s ním praktičtější. Je dobře, že na to existuje řada nástrojů, včetně LESS.

Co je LESS?

MÉNĚ je dynamický jazyk styles, druh doplňku CSS, který přidává do CSS určitou sadu dynamických vlastností: proměnné, mixiny, operace, funkce atd.

LESS je skript, který lze použít jak na straně klienta (tabulka CSS se počítá v prohlížeči uživatele), tak na straně. Existují však lepší způsoby, jak použít LESS, jako je předkompilace tabulky. V tomto případě můžete získat standardní stůl styly, které bude prohlížeč správně používat a nebude vyžadovat neustálou konverzi.

Proměnné

Proměnné v LESS fungují úplně stejně jako v jiných programovacích jazycích. Vytvoříte proměnnou, přiřadíte jí hodnotu a poté ji můžete použít v jakémkoli pravidle CSS. Například:

@serif-font: Georgia; h1, h2, h3, h4 (rodina písem: @serif-font;).velký text (rodina písem: @serif-font;)

V v tomto případě Proměnná @serif-font ukládá název písma. Pokud potřebujete změnit písmo Georgia na Times New Roman, pak stačí změnit hodnotu proměnné a hodnota písma se změní v celém dokumentu. Ještě pohodlnější je použití proměnných s barevnými kódy. Například následující fragment CSS

Tělo (barva: #ff9900; barva pozadí:#cccccc;) p (barva: #ff9900;) h1 (barva: #ff9900;)

lze nahradit následujícím:

@color-orange: #ff9900; @color-grey: #cccccc; tělo (barva: @barva-oranžová; barva pozadí: @barva-šedá;) p (barva: @barva-oranžová;) h1 (barva: @barva-oranžová;)

Jak vidíte, vše, co musíte udělat, je opravit barvy v záhlaví vašeho dokumentu CSS, abyste je opravili v celém dokumentu.

Proměnné mají rozsahy. V rámci každého pravidla můžete změnit přiřazení hodnoty proměnné pro toto pravidlo. V následujícím příkladu bude barva odkazu bílá a barva pozadí tlačítka šedá:

@color: #sssss; a tlačítko ( @color: #ffffff; color:@color;) ( pozadí: @color;)

Je důležité poznamenat, že proměnné v LESS jsou spíše blíže konstantám, protože je nelze přeřadit dále v kódu, pouze v rámci určitých pravidel.

Operace

LESS vám umožňuje používat operace uvnitř pravidel, což vám umožňuje dosáhnout přesné kontroly nad hodnotami:

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

Jak můžete vidět z kódu výše, proměnná @unit je nastavena na 3px . Dosadí se do hodnoty šířky okraje. Odsazení získáte vynásobením této hodnoty 3 nebo 2.

Všechny aritmetické operace lze použít v LESS. Jako operandy mohou fungovat nejen číselné hodnoty, ale také barvy. Proveďte tzv. míchání barev. Pokud chcete změnit hodnotu barvy, můžete tak učinit smícháním nebo odečtením jiné barvy:

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.

Práce s barvou

Existují další možnosti práce s barvou. Barvy můžete zesvětlit, ztmavit, nasytit, desaturovat a otočit. Toho je dosaženo použitím barevných funkcí.

Příklady použití a výsledků zobrazení naleznete v tabulce níže:

@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%); )

Každá barva v LESS je převedena na HSL (odstín, sytost, světlost), abyste měli kontrolu nad úrovněmi kanálů. To vám umožní jemněji manipulovat s barvami a také přímo získat informace o barvách:

@barva = #167e8a; odstín(@barva); sytost(@barva); lehkost(@barva);

k čemu to je? Normální člověk těžko rozpozná, která barva je zašifrována HEX kódem, ale LESS nepracuje s kódem samotným, ale s tónem, který nastavuje. Řekněme, že najdete fialovou barvu, která se vám líbí (#e147d4). Nyní ale potřebujete krémovější odstín, pak vám pomůže následující provedení dvou funkcí:

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

Hnízdění

Jednou z hlavních výhod CSS je kaskádová schopnost aktualizovat své styly. To znamená, že chcete-li nastavit styl odstavce uvnitř kontejneru článku, musíte použít kód:

Článek p (…)

A to je dobře, ale co když potřebujete nastavit nějaké další styly pro prvky uvnitř tohoto bloku. Pak budete muset neustále přidávat .article, než začnete definovat pravidlo. LESS umožňuje vnořovat styly do sebe, čímž zjednodušuje psaní kódu:

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

Odsazení je volitelné, ale zlepšuje čitelnost kódu. Úrovně vnoření nejsou omezeny.

Mixins

Chcete-li vytvořit rám se zaoblenými horními rohy, budete muset použít následující kód:

A tento kus kódu je potřeba přepsat pokaždé, když je třeba provést takové zaokrouhlení. To lze zjednodušit pomocí LESS. Chcete-li to provést, musíte vytvořit mix. Podívejte se na příklad:

Zaoblený-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;

V tomto případě jsme vytvořili a definovali zaokrouhlenou třídu a poté do ní importovali všechna její pravidla top třídy. A všechny styly nejvyšší třídy jsou importovány do třídy odeslání, včetně pravidel pro barvu pozadí a textu.

Pokud obvykle používáte stejný poloměr ohraničení, ale někdy potřebujete jiný, měli byste nastavit prolnutí 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-top-left-radius: @border-top-right-radius: @radius ( pozadí: #333; barva:#fff; top; ) .submit ( .rounded-top(3px); )

V tomto případě bude třída tab používat hodnotu 6px a třída odeslání použije hodnotu 3px. Parametrů může být více.

Na závěr je třeba poznamenat, že i přes hodnotu LESS, stejně jako u každé jiné technologie, by měla být vždy používána s rozumem a neměla by být zneužívána v situacích, ve kterých je výhodnější používat běžné CSS. V situacích, kdy je LESS vhodné, se však stane nepostradatelným a užitečným nástrojem.

Oblíbené v kategorii: