vimwiki

Css functions

The most used functions are:

• calc()
• min()
• max()
• clamp()

List of all the functions

calc()

Calculate a value with two powerful use cases:

• Mixing units
• Ability to nest calc(calc())

:root {
  --header: 3rem;
  --footer: 40px;
  --main: calc(100vh - calc(var(--header) + var(--footer)));
}

min()

Return the smallest value of a given list.

div {
 width: min(150px, 100%);
}

In the example, if 100% of the parent width is less than 150px, it will be set to the parent width.

max()

Return the largest value of a given list.

Not as usefull as min()

div {
 width: max(150px, 100%);
}

In the example, if 100% of the parent width is more than 150px, it will be set to the parent width.

clamp()

It take three value, the smallest, the ideal and the largest.

    h1 {
      font-size: clamp(320px, 80vw, 60rem);
    }