wtorek, 2024-01-02

CSS: Funkcja calc()

Funkcja calc() w CSS jest potężnym narzędziem, które pozwala na wykonywanie obliczeń arytmetycznych bezpośrednio w kodzie CSS. Można ją wykorzystać do dynamicznego obliczania wartości różnych właściwości, takich jak szerokość, wysokość, marginesy, wypełnienie itp., co uwalnia od potrzeby polegania wyłącznie na jednostkach statycznych lub procentowych.

Przykłady zastosowania funkcji calc()

Podstawowy przykład

.element {
  width: calc(100% - 20px);
}

W tym przykładzie szerokość elementu zostanie obliczona jako 100% szerokości kontenera rodzica minus 20 pikseli.

Złożone obliczenia

.element {
  margin: calc(10px + 5%) calc(20px + 3%);
}

Tutaj, górny i dolny margines elementu zostaną obliczone jako 10 pikseli plus 5% szerokości kontenera, a lewy i prawy margines jako 20 pikseli plus 3% szerokości kontenera.

Łączenie różnych jednostek

.element {
  font-size: calc(1rem + 2vw);
}

Rozmiar czcionki elementu zostanie obliczony jako suma 1 rem (rozmiar bazowy czcionki dokumentu) i 2 vw (2% szerokości obszaru wyświetlania).

Przykład ze zmienną CSS

:root {
  --main-spacing: 10px;
}

.element {
  margin: calc(var(--main-spacing) * 3);
}

Margines elementu zostanie obliczony jako trzykrotność wartości zmiennej --main-spacing.

Uwagi

calc() pozwala na mieszanie jednostek, co jest szczególnie przydatne w responsywnym designie.
Należy pamiętać o zachowaniu spacji wokół operatorów (+, -, *, /), ponieważ są one wymagane dla prawidłowego działania funkcji.
calc() może być używana wszędzie tam, gdzie są używane wartości liczbowe w CSS.