Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0Type: Mixin
@include circle();
* You can call mixins with or without the gls- namespace (e.g. @include gls-circle();).
The Circle Sass mixin helps you easily create perfect circle shapes.
Arguments
| Name | Type | Description |
|---|---|---|
$size | number (with unit) | The size of the circle, used for both the width and the height. Accepts what Sizer accepts: a length or a percentage, a sizing keyword, a CSS-wide keyword, var() or a maths function. |
Examples
Call the mixin inside a selector and pass a number value (with a unit) for the $size argument.
.element{
@include circle(150px);
}.element {
width: 150px;
height: 150px;
display: inline-block;
border-radius: 100%;
}Result
What it refuses
A size the browser drops stops the build. Measured in Chrome 152, that is a word that is not a sizing keyword, a unitless number other than 0, a unit that is not a length, a negative length and a length in quotes. Until 2.3.1 these compiled into a width and height the browser dropped without a word.
.element {
@include circle(24);
}Error: `24` is not a valid $size for `circle`: a unitless number is not a length; add a unit, such as `24px`. A browser drops the width and height.