Calc expressions

Calc expressions allow you to perform calculations within CSS property values, supporting a wide range of use cases such as responsive design, grid systems, and fluid typography.

Several calc operators are supported:

@+@ adds two operands, e.g. pct 90 @+@ px 16.
@-@ subtracts the second operand from the first, e.g. pct 100 - px 32.
@* multiplies the first operand by the second, e.g. px 16 @* 2.
*@ multiplies the first operand by the second, e.g. 2 *@ px 16.
@/ divides the first operand by the second, e.g. pct 100 @/ 6.

Notice that each operator includes one or more @ symbols. An operand that is adjacent to this symbol is a measure; otherwise, it is a number or integer.

Here is an example of how the @-@ and @* operators can be used to make a div element span the width of the viewport, but leaving a 32-pixel "margin" on each side:

module Example.StyleSheet where

import Tecton
import Tecton.Rule as Rule

styleSheet :: CSS
styleSheet = do
  body ? margin := nil
  div ? Rule.do
    margin := nil ~ auto -- horizontal centering
    width := vw 100 @-@ px 32 @* 2

Tecton Guide

Calc expressions