# Functions

For `calc()`, white space is required around the "`-`" and "`+`" operators, but not the "`*`" or "`/`" operators.

All units must be of the same type; trying to multiply a height by a time duration, for example, is invalid.

#### calc() function

Accepts a mathematical expression and returns a numerical value.

It is especially useful when working with different types of units (e.g. subtracting a px value from a percentage) to calculate the value of an attribute.

`+`, `-`, `/`, and `*` operators can all be used, and parentheses can be added to specify the order of operations if necessary.

Use `calc()` to calculate the width of a div element:

```#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
text-align: center;
}
```

Use `calc()` to determine the position of a background-image:

```background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;
```

Use `calc()` to determine the height of an element:

```height: calc(100% - 20px);
```

#### attr() function

Returns the value of an attribute of the selected element.

Below is a blockquote element which contains a character inside a which CSS can use (e.g. inside the `::before` and `::after` ) using this function.

```<blockquote data-mark='"'></blockquote>
```

In the following CSS block, the character is appended before and after the text inside the element:

```blockquote[data-mark]::before,
blockquote[data-mark]::after {
content: attr(data-mark);
}
```

Creates a image representing a linear gradient of colors.

```linear-gradient( 0deg, red, yellow 50%, blue);
```

This creates a gradient going from bottom to top, with colors starting at red, then yellow at 50%, and finishing in blue.

```radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the
gradient, red at the center, then orange, until it is finally yellow at the edges*/
```

#### var() function

The var() function allows CSS variables to be accessed.

```/* set a variable */
:root {
--primary-color: blue;
}

/* access variable */
selector {
color: var(--primary-color);
}
```

This feature is currently under development. Check caniuse.com for the latest browser support.