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.0* You can call mixins with or without the gls- namespace (e.g. @include gls-background-dots();).
The Background Dots Sass mixin allows you to easily create a stylish dotted background pattern (also known as polka dots).
Arguments
| Name | Type | Description |
|---|---|---|
$color | list | The color or colors of the dots. Accepts no more than two color values. By default there is only one color, a translucent black. Each is a colour, currentColor, a system colour, or a function such as var() or light-dark(). |
$size (1em) | number (with unit), function | The size of the dots. The default value is 1em. Also accepts a percentage, var(), env(), or a calculation such as calc() or clamp(). Not a negative size. |
$gutter ($size * 5) | number (with unit), function | The size of the space between the dots. The default value is $size * 5, which means 5em. Accepts the same forms as $size. |
$diagonal (true) | boolean | This option lets you set the line order of the dots. The default value is true. |
$image | string (quoted), function | Accepts the URL of an image. This option helps you add an image underneath the dots to create more stylish design elements. A value that already is an image, var(), url(), image-set() or a gradient, is written as it is rather than wrapped in url(). The path is written without quotes unless it holds a space, a parenthesis or a quote, which an unquoted url() cannot: since 2.3.1 those are quoted, where before the browser dropped them. |
Using two separate color values together is only possible when the $diagonal option is true. See the examples for more.
Examples
Simply call the mixin without passing any arguments.
.element{
@include background-dots;
}.element {
background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1em, transparent 0), radial-gradient(rgba(0, 0, 0, 0.1) 1em, transparent 0);
background-position: 2.5em 2.5em, 10em 10em;
background-size: 5em 5em;
background-repeat: repeat;
}Let's play with the $color and $size arguments.
.element{
@include background-dots(
$color: pink,
$size: 10px
);
}.element {
background-image: radial-gradient(pink 10px, transparent 0), radial-gradient(pink 10px, transparent 0);
background-position: 25px 25px, 100px 100px;
background-size: 50px 50px;
background-repeat: repeat;
}You can increase or decrease the space between the dots. Compare the result with example 2.
.element{
@include background-dots(
$color: pink,
$size: 10px,
$gutter: 70px
);
}.element {
background-image: radial-gradient(pink 10px, transparent 0), radial-gradient(pink 10px, transparent 0);
background-position: 35px 35px, 140px 140px;
background-size: 70px 70px;
background-repeat: repeat;
}You can add a second color value as well. Note that the second color only works when the $diagonal argument is true, and the two colors must be separated by a space.
.element{
@include background-dots(
$color: red orange,
$size: 10px
);
}.element {
background-image: radial-gradient(red 10px, transparent 0), radial-gradient(orange 10px, transparent 0);
background-position: 25px 25px, 100px 100px;
background-size: 50px 50px;
background-repeat: repeat;
}Set the $diagonal argument to false to make the dots look more linear.
.element{
@include background-dots(
$color: red,
$size: 4px,
$diagonal: false
);
}.element {
background-image: radial-gradient(red 4px, transparent 0);
background-position: 10px 10px;
background-size: 20px 20px;
background-repeat: repeat;
}Now let's add an image and see how sexy this design piece will look!
.element{
@include background-dots(
$color: rgba(black, 0.1) rgba(green, 0.2),
$size: 4px,
$gutter: 20px,
$image: "/images/backgrounds/03.jpg"
);
}.element {
background-image: radial-gradient(rgba(0, 0, 0, 0.1) 4px, transparent 0), radial-gradient(rgba(0, 128, 0, 0.2) 4px, transparent 0);
background-position: 10px 10px, 40px 40px;
background-size: 20px 20px;
background-repeat: repeat;
position: relative;
}
.element::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url(/images/backgrounds/03.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: -1;
}What it refuses
A dot colour that is not a colour stops the build. Measured in Chrome 152, a word or a quoted colour drops the gradient, and a length is worse: radial-gradient(10px 1em, transparent 0) is kept, with 10px read as the gradient's size, so the dots come out wrong without a word. Until 2.3.1 both compiled.
.element {
@include background-dots(red 10px);
}Error: `10px` is not a valid colour in $color for `background-dots`: it is not a colour. Pass one colour, or two for the diagonal variant, such as `red` or `var(--dot)`.A size or gutter the browser drops stops the build too. Measured in Chrome 152, the gradient and background-size drop a negative length, a unitless number other than 0 and a unit that is not a length. Until 2.3.1 these compiled.
.element {
@include background-dots(red, -1em);
}Error: `-1em` is not a valid $size for `background-dots`: a length below zero does not work here. A browser drops the pattern.Image paths with a space
Measured in Chrome 152, url(/img/a b.png) is dropped, while url("/img/a b.png") loads the file. The mixin used to write every path unquoted, so a path with a space, a parenthesis or a quote in it produced no image. It now quotes those, and only those.
.element {
@include background-dots(red, $image: "/img/a b.png");
}