Gerillass: Sizer Sass Mixin

Sizer

Type: Mixin

@include sizer();

* You can call mixins with or without the gls- namespace (e.g. @include gls-sizer();).

The Sizer Sass mixin helps you size elements with one statement (or two). Size elements or create squares and rectangles very easily.

Name	Type	Description
`$width`	number (with unit),<br/>string	Sets the width of the selected elements.
`$height`	number (with unit),<br/>string	Sets the height of the selected elements. The default value is the `$width` value.

Call the mixin to adjust the $width and the $height of an element.

Sass

.element{
  @include sizer(200px);
}

CSS

.element {
  width: 200px;
  height: 200px;
}

Result

To assign different values to the width and height properties of an element, do the following:

Sass

.element{
  @include sizer(500px, 100px);
}

CSS

.element {
  width: 500px;
  height: 100px;
}

Result

You can pass string values as well!

Sass

.element{
  @include sizer(400px, auto);
}

CSS

.element {
  width: 400px;
  height: auto;
}

Result