Функциите значително опростяват вашето програмиране и това важи и когато пишете CSS код.
Less CSS е стабилен и динамичен CSS препроцесор, който привлече значително внимание и популярност през последните години. Като препроцесор, той служи като разширение на "Vanilla CSS", традиционния CSS стилизиращ език, използван в уеб развитие, чрез предоставяне на набор от допълнителни характеристики и функционалности, които подобряват цялостния стил опит.
Ако сте добре запознати с писането на стандартен CSS, можете безпроблемно да преминете към използване на Less CSS без стръмна крива на обучение. Тази съвместимост улеснява поддържането на вашите съществуващи знания за CSS, като същевременно се възползвате от разширените възможности на Less.
Какво представляват функциите и защо са важни?
В програмирането функцията е блок от код, който изпълнява конкретна задача. Можете също да го използвате повторно някъде другаде в програмата. Функциите обикновено приемат данни, обработват ги и връщат резултатите.
Те улесняват намаляването на дублирания код в програмата. Например, да кажем, че имате програма, която изчислява отстъпката въз основа на цената, въведена от потребителя. В
език като JavaScript, можете да го приложите така:функцияcheckDiscount(цена, праг){
ако (цена >= праг){
позволявам отстъпка = 5/100 * цена;
връщане`Вашата отстъпка е $${отстъпка}`;
} друго {
връщане„За съжаление този артикул не отговаря на условията за отстъпка. `
}
}
След това можете да извикате функцията и да я прехвърлите цена и на праг.
позволявам цена = бърза(„Въведете цената на артикула:“)
сигнал (проверете отстъпка (цена, 500))
Като абстрахирате логиката за проверка на отстъпките, програмата е не само четлива, но вече имате многократно използваем блок от код, който обработва отстъпката и връща резултата. Функциите могат да направят много повече, но това са само основите.
Разбиране на функциите в по-малко CSS
В традиционния CSS има много ограничен набор от функции, достъпни за вас като разработчик. Една от най-популярните функции в CSS е calc() математическа функция който прави точно това, което изглежда – извършва изчисления и използва резултата като стойност на свойство в CSS.
стр{
Цвят на фона: червен;
ширина: калк(13px- 4px);
}
В Less CSS има няколко функции, които правят повече от просто аритметични операции. Една функция, която може да срещнете в Less, е ако функция. The ако функцията приема три параметъра: условие и две стойности. Кодовият блок по-долу показва как можете да използвате тази функция:
@ширина: 10px;
@височина: 20px;
див{
марж:ако((@ширина > @височина), 10px, 20px)
}
В кодовия блок по-горе компилаторът Less проверява дали променливата ширина (дефиниран от @ символ) е по-голямо от променливата височина. Ако условието е вярно, функцията връща първата стойност след условието (10px). В противен случай функцията връща втората стойност (20px).
След компилацията CSS изходът трябва да изглежда по следния начин:
див {
марж: 20px;
}
Как да използвате Boolean в Less
Булева стойност е променлива, която има две възможни стойности: вярно или невярно. С boolean() функция в Less, можете да съхранявате истинската или невярната стойност на израз в променлива за по-късна употреба. Ето как работи.
@текст-цвят: червен;
@bg-color: boolean(@text-color = red);
В кодовия блок по-горе компилаторът Less проверява дали цвят на текста е червен. Тогава бг-цвят променливата съхранява стойността.
див{
Цвят на фона: ако(@bg-color,зелено, жълто);
}
Кодовият блок по-горе се компилира до нещо подобно:
див {
Цвят на фона: зелено;
}
Замяна на текст в низ с функцията replace().
Синтаксисът за замени() функцията изглежда така:
замени(низ, модел, замяна, знамена)
низ представлява низа, в който искате да търсите и замените. модел е низът за търсене. модел може да бъде и регулярен израз, но обикновено е низ. След успешно съвпадение компилаторът Less CSS го замества модел с замяна.
По избор, на замени() функцията може също да съдържа знамена параметър за флагове за регулярен израз.
@низ: "Здравейте";
@модел: "здравей";
@замяна: "аз";
див::преди{
съдържание: замени(@низ,@модел,@замяна)
}
Кодовият блок по-горе трябва да доведе до следното след компилиране:
див::преди {
съдържание: "здрасти";
}
Избройте функциите в по-малко CSS
В Less CSS използвате запетаи или интервали, за да дефинирате списък със стойности. Например:
@бакалия: "хляб", "банан", "картофи", "мляко";
Можете да използвате дължина() функция за оценка на броя на елементите в списъка.
@резултат: дължина (@бакалия);
Можете също да използвате екстракт() функция за извличане на стойността в определена позиция. Например, ако искате да получите третия елемент в бакалия списък, правите следното:
@трети елемент: екстракт (@бакалия, 3);
За разлика от обикновените езици за програмиране, където индексът на списъка започва от 0, началният индекс на списък в Less CSS винаги е 1.
Друга функция за списък, която може да бъде полезна при изграждане на уебсайтове с Less, е диапазон () функция. Приема три параметъра. Първият параметър определя началната позиция в диапазона. Вторият параметър указва крайната позиция, а последният параметър указва стойността на нарастване или намаляване между всеки елемент в диапазона. Ако не е предоставена, стойността по подразбиране е 1.
div {
поле: диапазон (10px, 40px, 10);
}
Кодовият блок по-горе трябва да се компилира до следното:
div {
поле: 10px 20px 30px 40px;
}Както можете да видите, Less CSS компилаторът започва от 10px, увеличавайки предишната стойност с 10, докато достигне крайната позиция (40px).
Изграждане на прост уебсайт с по-малко CSS функции
Време е да обедините всичко, което сте научили, и да създадете прост проект с Less CSS. Създайте папка и добавете index.htm и стил.по-малко файлове.
Отвори index.htm файл и добавете следния HTML код.
html>
<htmlезик="bg">
<глава>
<метанабор от знаци="UTF-8">
<метаиме="viewport"съдържание="width=device-width, initial-scale=1.0">
<връзкаотн="stylesheet/less"Тип="текст/css"href="style.less" />
<заглавие>Документзаглавие>
глава>
<тяло>
<дивклас="контейнер">
<h1>
h1>
див>
<сценарийsrc=" https://cdn.jsdelivr.net/npm/less" >сценарий>
тяло>
html>
В кодовия блок по-горе има родител "контейнер"див с празен h1 елемент. The src атрибут на сценарий маркерът сочи към пътя към Less CSS компилатора.
Без това сценарий маркер, браузърът няма да може да разбере вашия код. Като алтернатива можете да инсталирате Less CSS на вашия компютър чрез Мениджър на пакети на възли (NPM), като изпълните следната команда в терминала:
npm install -g по-малко
Всеки път, когато сте готови да компилирате .по-малко файл, просто изпълнете командата по-долу, като се уверите, че сте посочили файла, в който компилаторът трябва да запише изхода.
по-малко стил.по-малко стил.css
В стил.по-малко файл, създайте две променливи, а именно: ширина на контейнера и контейнер-bg-цвят за представяне на ширината и цвета на фона на "контейнер"див съответно.
@ширина на контейнера: 50 rem;
@container-bg-color: жълто;
След това създайте три променливи, а именно: низ, модел, и замяна. След това добавете стиловете за "контейнер"див и на h1 елемент.
@низ: „Здравейте от децата на планетата Земя!“;
@модел: "деца на планетата Земя!";
@замяна: "жители на Плутон!";.контейнер{
ширина: @ширина на контейнера;
Цвят на фона: @container-bg-color;
подплата: ако(@ширина на контейнера > 30 бр, обхват(20px, 80 пиксела, 20),"");
граница: твърдо;
}
h1:първо дете::след{
съдържание: замени(@низ,@модел,@замяна);
}
В кодовия блок по-горе, диапазон () функция задава подплата имот на "контейнер"див. Компилаторът Less трябва да компилира стил.по-малко файл в следното:
.контейнер {
ширина: 50рем;
Цвят на фона: жълто;
подплата: 20px 40px 60px 80px;
граница: твърдо;
}
h1:първо дете::след {
съдържание: "ЗдравейтеотнаобитателинаПлутон!";
}
Когато отворите index.htm файл в браузъра, ето какво трябва да видите:
Подобрете производителността си с CSS препроцесори
В обикновените езици за програмиране функциите намаляват количеството код, който трябва да напишете, и минимизират грешките. CSS препроцесорите като Less предоставят няколко функции, които улесняват писането на CSS код.
CSS препроцесорите са полезни при работа с големи файлове. Те улесняват отстраняването на грешки, като по този начин подобряват производителността на програмиста.
