Create

Property

@size

Width and height in one declaration.

Syntax

  • @size: <size>
  • @size: <width> <height>
  • @size: <width> auto <ratio>
width, height
Any CSS length. The height defaults to the width.
ratio
Used as aspect-ratio when the width or the height is auto, written as 4/3 or (4/3).

Written at the top level it sizes every cell. On :doodle it sizes the component. The / modifier of @grid takes the same value, except that a ratio there needs the parentheses, (4/3). On a cell, @size also records the size for @place.

Examples

@grid: 1 / 60vmin;

/* width: 10em; height: 10em; */
@size: 10em;

/* width: 10em; height: 6em; */
@size: 10em 6em;
Open in playground

Random sizes with a fixed ratio:

@grid: 5 / 60vmin _1px;
@size: @r(30%, 90%) auto 3/2;
margin: auto;
background: #000;
Open in playground

See also