size

view source

Define both of an element's dimensions in one fell swoop.

use-name

scut-size

type

mixin only

arguments

$size
A single value apply to both dimensions, making a square; a list of two (width then height) will make a rectangle.

(You may want to read about the origin of the phrase "one fell swoop.")

If a single value is passed, it will be applied to both width and height, producing a square. To make a rectangle, pass a two-value list: width then height.

example

SCSS

.eg-size-1 {
  @include scut-size(8em);
}
.eg-size-2 {
  @include scut-size(10em 5em);
}

compiled CSS

.eg-size-1 {
  width: 8em;
  height: 8em;
}

.eg-size-2 {
  width: 10em;
  height: 5em;
}

Result

A square

A rectangle