Функции за CSS променливи (част 1)
Ако първото предназначение на променливите в CSS е промяна на много стилове с малко код, то мащабът му се увеличава няколкократно, когато използваме и функции.
calc()
Една от най-често срещаните функции в CSS е calc(). На много места може да срещнете употребата ѝ за изчисляване на размер на елемент, който трябва да е на база едновременно релативни и абсолютни единици. Примерно: width: calc(100% - 50px).
Когато някоя от стойностите вътре в calc() обаче е custom property вече става по-интересно. Нека разгледаме следния пример:
Имаме клас .box на който задаваме широчина, зависеща от променлива --size, със стойност по подразбиране 100px. Височината задаваме с формула разделяща --size на променлива --aspect-ratio (със стойност по подразбиране 1).
За първия елемент не задаваме никакви стойности на променливите, защото използваме просто стойностите по подразбиране.
За втория и третия (с класове box-2 и box-3) съответно задаваме размер 150px и 250px, както и aspect ratio от 4:3 и 16:9.
Променливи на базата на други променливи
А за да избегнем повторението на стойност по подразбиране на --size както за width така и за height можем да направим следното:
Първо задаваме променлива с име --default-size и стойност var(--size, 100px). Така, ако --size е дефинирана – --default-size ще вземе нейната стойност. А ако не е – ще вземе стойността по подразбиране от 100px. И в двата случая обаче сме сигурни, че --default-size ще има някаква стойност и няма нужда на нея да ѝ задаваме такава по подразбиране.
От там вече и width можем да го зададем просто като var(--default-size) и отново да използваме тази променлива и за height.
В този пример --default-size се ползва само на 2 места и ползите не са чак толкова големи, но в един реален CSS подобна променлива може да се ползва десетки пъти и спестявянето на стойност по подразбиране всеки път не само, че пести нерви, но и при нужда от промяна на тази стойност ще стане само на 1 място. А това е и една от основните цели при употребата на собствени свойства в CSS.
min() и max()
Ако продължим с математическите функции е редно да отбележим и тези.
min() приема две или повече стойности, отделени със запетаи и връща най-малката от всички.
max() работи аналогично, като връща най-голямата.
В този пример задаваме клас landscape, който е предназначен по входни параметри X и Y на правоъгълник да го завърта винаги в пейзаж (широчината винаги да е по-голяма от височината).
С --x означаваме входна широчина, а с --y – входната височина.
Стойностите по подразбиране са такива, че елементът си е в пейзажно разположение така или иначе. Но за landscape-2 може да видите, че по входни данни е трябвало да е само 100px широк, а 300px висок. Стиловете обаче се грижат да използваме по-голямата и по-малката от двете стойности така, че да са присвоени съответно на широчината и височината на показания елемент.
inline стойности на променливите
В горния пример „входни“ звучи малко странно, тъй като в крайна сметка всичко е въведено в самия CSS. Собствени свойства обаче могат да се задават и с inline стилове и тогава получаваме нещо такова:
Вмъквайки style="" атрибут в HTML-а, можем да зададем стойност на CSS променлива за дадения елемент. И тогава вече „входни параметри“ звучи доста по-правдоподобно.
clamp()
Накрая остава да споменем и тази функция, която един вид обединява min() и max().
Ако примерно искаме да задаваме големина на шрифт с променлива, но все пак искаме да валидираме стойността ѝ, че няма да е по-малко от 10px или повече от 14px, защото в единия случай това ще е прекалено малко и нечетимо, а в другия се опасяваме, че ще е твърде голямо.
Единият вариант е да имате: font-size: max(10px, min(14px, var(--custom-font-size, 12px))). Ако го прочетете внимателно ще видите, че прави точно това, което съм описал горе.
clamp() позволява да сбием малко синтаксиса: font-size: clamp(10px, var(--custom-font-size, 12px), 14px).
Ето и пример, че работи: