References

Functions

CSS Functional Notation is a type of CSS value that can represent more complex data types or invoke special data processing or calculations.

Reference functions

The following functions are used as a value of properties to reference a value defined elsewhere.

function	description
`attr()`	Used to retrieve the value of an attribute of the selected element and use it in the stylesheet.
`env()`	Used to insert the value of a user agent-defined environment variable.
`url()`	Used to include a file.
`var()`	Used to insert a value of a custom property instead of any part of a value of another property.

env()

The env() can be used to insert the value of a user agent-defined environment variable into your CSS, in a similar fashion to the var() function and custom properties.

function	description
`env(safe-area-inset-top)`	The top insets from the edge of the viewport.
`env(safe-area-inset-bottom)`	The bottom insets from the edge of the viewport.
`env(safe-area-inset-left)`	The left insets from the edge of the viewport.
`env(safe-area-inset-right)`	The right insets from the edge of the viewport.

<div class="pt:calc(env(safe-area-inset-top)+0.5rem)">...</div>

var()

Define your variables in CSS file or <style>, access the variable via $(var).

:root {
    --demo-skew: skewX(30deg);
}

<img class="transform:$(demo-skew)"></img>

Transform functions

Master document of transform function: Transform.

function	description
`translate(x,y)`	Translates an element horizontally.
`translate3d(x,y,z)`	Translates an element in 3D space.
`translateX(x)`	Translates an element horizontally.
`translateY(y)`	Translates an element vertically.
`translateZ(z)`	Translates an element along the z-axis.
`scale(x,y)`	Scales an element up or down on the 2D plane.
`scale3d(x,y,z)`	Scales an element up or down in 3D space.
`scaleX(x)`	Scales an element up or down horizontally.
`scaleY(y)`	Scales an element up or down vertically.
`scaleZ(z)`	Scales an element up or down along the z-axis.
`skew(x,y)`	Skews an element on the 2D plane.
`skewX(x)`	Skews an element in the horizontal direction.
`skewY(y)`	Skews an element in the vertical direction.
`rotate(angle)`	Rotates an element around a fixed point on the 2D plane.
`rotate3d(x,y,z,angle)`	Rotates an element around a fixed axis in 3D space.
`rotateX(x)`	Rotates an element around the horizontal axis.
`rotateY(y)`	Rotates an element around the vertical axis.
`rotateZ(z)`	Rotates an element around the z-axis.
`perspective()`	Sets the distance between the user and the z=0 plane.
`matrix()`	Describes a homogeneous 2D transformation matrix.
`matrix3d()`	Describes a 3D transformation as a 4×4 homogeneous matrix.

Math functions

The math functions allow CSS numeric values to be written as mathematical expressions.

function	description
`calc()`	A math function that allows basic arithmetic to be performed on numerical CSS values.
`clamp()`	A comparison function that takes a minimum, central, and maximum value and represents its central calculation.
`max()`	A comparison function that represents the largest of a list of values.
`min()`	A comparison function that represents the smallest of a list of values.

Filter functions

Master document of filter function: Filter, Backdrop Filter.

function	description
`blur()`	Blurs the image.
`brightness()`	Makes the image brighter or darker.
`contrast()`	Increases or decreases the image's contrast.
`drop-shadow()`	Applies a drop shadow behind the image.
`grayscale()`	Converts the image to grayscale.
`hue-rotate()`	Changes the overall hue of the image.
`invert()`	Inverts the colors of the image.
`opacity()`	Makes the image transparent.
`saturate()`	Super-saturates or desaturates the input image.
`sepia()`	Converts the image to sepia.
`backdrop-filter: filter-function`	The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element.

Color functions

Master includes out-of-the-box color palette consisting of several common colors: Colors.

function	description
`rgb()`	The RGB color model defines a given color according to its red, green, and blue components. An optional alpha component represents the color's transparency.
`rgba()`	The RGB color model defines a given color according to its red, green, and blue components. The alpha component represents the color's transparency.
`hsl()`	The HSL color model defines a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.
`hsla()`	The HSL color model defines a given color according to its hue, saturation, and lightness components. The alpha component represents the color's transparency.

Image functions

Master document of Image function: Background Image, List Style Image.

function	description
`url()`	Defines an in a similar fashion to the url() function.
`linear-gradient()`	Linear gradients transition colors progressively along an imaginary line.
`radial-gradient()`	Radial gradients transition colors progressively from a center point (origin).
`repeating-linear-gradient()`	It repeats the linear-gradient color stops infinitely in all directions so as to cover its entire container.
`repeating-radial-gradient()`	It repeats the radial-gradient color stops infinitely in all directions so as to cover its entire container.
`conic-gradient()`	Conic gradients transition colors progressively around a circle.
`background-image: image-function`	Defines a background image.
`list-style-image: image-function`	Defines a list marker.

Counter functions

The counter functions are generally used with the content property.

function	description
`counter()`	Returns a string representing the current value of the named counter, if there is one.
`counters()`	Enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any.

Shape functions

Master document of shape function: Clip Path, Shape Outside.

function	description
`circle()`	Defines a circle.
`ellipse()`	Defines an ellipse.
`inset()`	Defines an inset rectangle.
`polygon()`	Defines a polygon.
`path()`	Accepts an SVG path string to enable a shape to be drawn.
`shape-outside: shape-function`	The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.
`clip-path: shape-function`	The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Grid functions

Master document of grid function: Grid.

Hello world

.font\:heavy {
    font-weight: 900
}

@media print {
    .hide\@print {
        display: none
    }
}

@media (min-width:1024px) {
    .font\:24\@md {
        font-size: 1.5rem
    }
}

automatically