Програмируеми по-малко езикови стилове

CSS - мощен и интересен стил на езика страница. Това е бърз и лесен, но най-важното е, че в минималната версия се поддържа от всички браузъри абсолютно било то малки мобилно устройство, или огромен телевизор.

Въпреки това, за всичките му безспорни заслуги в CSS има някои, дори и недостатъци, но ограничен. Тези ограничения не са критични, но може значително да удължи времето на изготвяне.

Какво е възможно да има ограничения. Например, цвят. Ако видим подобен запис FF9F94. е невъзможно да се определи веднага, че това означава тъмен цвят праскова. Тя е много по-лесно да се създаде променлива, например darkPeach. присвоява стойност на # FF9F94 и след това да използвате тази променлива в стилове. Каква утеха може да донесе за себе си: не е нужно да се помни, цветен код, за да го посочи на друго място, за да се промени един цвят през масата просто достатъчно, за да промените стойността на променливата.

С други думи, CSS липсва малко програмиране и логика, за да работим с тях по-практично. Е, това за това има редица инструменти, сред които е и по-малко.

Какво е по-малко?

По-малко - динамичен стилове език, един вид добавка CSS, който добавя CSS в набор от динамични характеристики: променливи, смесване, операции, функции и т.н.

По-малко - е скрипт, който може да се използва както от страна на клиента (CSS-маса се изчислява в браузъра на потребителя), или на страната. Въпреки това, има по-добри начини за използване на по-малко - например, предварителна компилация от масата. В този случай, можете да получите стандартен лист със стилове, които ще бъдат правилно използва от браузъра и не изискват това постоянно повторно конвертирате.

променливи

Променливи за по-малко работят по същия начин, както и в други езици за програмиране. Можете да създадете променлива, се присвоява стойност на това, и можете да продължите да я използвате по какъвто и CSS правило. Например:

В този случай, променливата @ серифен шрифт запазва името на шрифта. Ако искате да промените шрифта в Грузия Times New Roman, а след промените стойността доста променлива и промените стойността на шрифта в целия документ. По-удобно да се използва променливи с цветни кодове. Например, CSS следния пасаж

може да бъде заменен със следния текст:

Както можете да видите, това е достатъчно, за да се коригира цвета в заглавната част на CSS-документ, за да ги поправи в документа.

Ние имаме променливи. В рамките на всяка власт, който можете да определите стойността на това правило. В следващия пример, връзката цвят ще бъде на белия цвят и бутон фон - сив:

Важно е да се отбележи, че променливи в по-малко вероятно по-близо до константите като ги задават нови по-долу кода не е възможно, в рамките на определени правила.

ПО-МАЛКО позволява работа в рамките на правилата, което дава възможност за прецизен контрол на стойностите на:

Както се вижда от кода по-горе, @unit променлива се 3px. Той се поставя в стойността на широчината на границата. Тиретата съответно получени чрез умножаване на тази стойност е 3 или 2.

Колкото по-малко можете да използвате всички аритметични операции. Устройствата могат да бъдат не само числовите стойности, но също и цветовете. За извършване на така наречения цвят смесване. Ако искате да промените цвета, можете да го направите чрез смесване или изваждане с различен цвят:

Горната операцията е фонов режим увеличава всяка стойност HEX от 2. Резултатът ще бъде # B64141 - по-лека версия на оригиналния цвят. Операция рамка ще доведе до намаляване на стойността на всеки един HEX и ще даде по-тъмен цвят: # 830E0E. На практика има много случаи, когато започнем с основния цвят и се нуждаят от по-малко затъмните или осветлите си версия.

Работа с цвят

Има и други възможности за работа с цвят. Можете да се облекчи, потъмняване, насищане, обезцветявам и завъртете цвят. Това се постига чрез използването на цветни черти.

Примери за използване и показване на резултатите вижте таблицата по-долу:

Всеки цвят в по-малко се превръща в HSL (нюанса, наситеността, лекота), за да се гарантира, че имате контрол върху нивата на каналите. Това дава възможност за манипулиране на цветовете по-тънък, както и да получите информация за цвета директно:

Какво прави той? Един нормален човек е трудно да се разпознае какъв цвят HEX код е криптирана, но по-малко не работи със самия код и с тон, който той определя. Да речем, че се намери лилав цвят, който ви харесва (# e147d4). Но сега имате нужда от крем сянка на това, тогава ще може да помогне на следния изграждането на тези две функции:

гнездене

Едно от основните предимства на CSS е каскаден актуализира своите стилове. Това е, за да зададете статията на параграф стил вътре в контейнера, който искате да използвате кода:

И това е добре, но това, което, ако трябва да попитам още няколко стилове за елементи в рамките на този блок. След това трябва постоянно да надграждат .article преди определяне на правилата. ПО-МАЛКО позволява вложени стилове, като по този начин е по-лесно да се напише код:

Отстъпи не са задължителни, но те се подобри четливостта на кода. нива на въвеждане са ограничени.

Смесване (mixins)

За създаване на рамка, която е закръглена горните ъгли са да се използва следния код:

И това парче код, за да пренапише всеки път, когато трябва да направите е закръгляване. Това може да бъде опростено чрез използване на по-малко. За да направите това, вие трябва да създадете добавката. Вижте пример:

В този случай, ние сме създали и определи Закръглената най-висок клас. и след това да импортирате всичките си права в най-висок клас. И всички Klas топ стилове в внасят представят клас. включително правила за цветовете на фона и текста.

Ако обикновено използват един и същ граничен радиус. но понякога се нуждаете от друг, трябва да настроите смесването на стандартната стойност.

В този случай, в раздела ще бъде използвана от стойността на класа в 6 пиксела. и представя класна стая 3px. Параметрите могат да бъдат няколко.

За повече подробности се четат и разбират по-малко можете да lesscss.org на място.

В заключение следва да се отбележи, че независимо от стойността на по-малко, тъй като с всяка технология, е необходимо да се използва винаги с ума, ние не трябва да злоупотребяват с тях в случаите, в които е по-удобно да се използва конвенционален CSS. Въпреки това, в случаите, когато по-малко е необходимо, тя ще се превърне в незаменим и полезен инструмент.