Background Stripes Sass Mixin

Background Stripes

Type: Mixin

@include background-stripes();

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

The Background Stripes Sass mixin allows you to create stylish and colorful background stripes.

Arguments

Name	Type	Description
`$color`	list	The color or colors of the stripes. By default there is only one color, a translucent black. Accepts one or more color values to create multiple color stops. Each is a colour, `currentColor`, a system colour, or a function such as `var()` or `color-mix()`.
`$thickness`	number<br/>(with unit), function	The thickness of the stripes. The default value is `1em`. Also accepts a percentage, a negative length, `var()`, `env()`, or a calculation such as `calc()` or `clamp()`.
`$rotation`	number<br/>(with deg unit)	The rotation of the stripes. The default value is `-45deg`. This option lets you create diagonal or straight stripes very easily. Accepts an angle in `deg`, `grad`, `rad` or `turn`, such as `0.25turn`, or a unitless number, which is read as degrees. Any other unit is refused.
`$image`	string<br/>(quoted), function	Accepts the URL of an image. This option helps you add an image underneath the stripes 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.

Multiple color values must be separated by a space (e.g. $color: red blue green).

Examples

Simply call the mixin without passing any arguments.

Sass

.element{
  @include background-stripes();
}

CSS

.element {
  background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 1em, transparent 1em, transparent 2em);
}

Result

Let's pass a $color value to it!

Sass

.element{
  @include background-stripes(
    $color: pink
  );
}

CSS

.element {
  background-image: repeating-linear-gradient(-45deg, pink 0, pink 1em, transparent 1em, transparent 2em);
}

Result

Now let's add more colors and change the $thickness and $rotation values. Important: Don't forget that multiple color values must be separated by a space!

Sass

.element{
  @include background-stripes(
    $color: #FFD393 #FF974F #F54F29,
    $thickness: 3em,
    $rotation: 90deg
  );
}

CSS

.element {
  background-image: repeating-linear-gradient(90deg, #FFD393 0em, #FFD393 3em, #FF974F 3em, #FF974F 6em, #F54F29 6em, #F54F29 9em);
}

Result

Add an image to make your design look more alive! Just do not forget to use quotes when you pass the URL of an image.

Sass

.element{
  @include background-stripes(
    $color: rgba(blue, 0.4),
    $thickness: 3px,
    $rotation: 45deg,
    $image: "/images/backgrounds/05.jpg"
  );
}

CSS

.element {
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 255, 0.4) 0, rgba(0, 0, 255, 0.4) 3px, transparent 3px, transparent 6px), url(/images/backgrounds/05.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Result

You can create an old-fashioned TV screen effect as well.

Sass

.element{
  @include background-stripes(
    $color: black,
    $thickness: 1px,
    $rotation: 180deg,
    $image: "/images/backgrounds/03.jpg"
  );
}

CSS

.element {
  background-image: repeating-linear-gradient(180deg, black 0, black 1px, transparent 1px, transparent 2px), url(/images/backgrounds/03.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Result

What it refuses

A $rotation whose unit is not an angle stops the build. Until 2.3.1 the mixin added deg to any unit that was not deg, so -10px became -10pxdeg and a valid 0.25turn became 0.25turndeg, and measured in Chrome 152 the browser dropped both gradients. An angle in grad, rad or turn is now written as it is.

Sass

.element {
  @include background-stripes(red, 2em, -10px);
}

Error: `-10px` is not a valid $rotation for `background-stripes`: `px` is not an angle unit, and a browser drops the gradient. Pass an angle in deg, grad, rad or turn, such as `-45deg`, or a unitless number, which is read as degrees.

A stripe colour that is not a colour is refused too, since 2.3.1: a word or a quoted colour drops the whole pattern.

Sass

.element {
  @include background-stripes(red "blue");
}

Error: `"blue"` is not a valid colour in $color for `background-stripes`: a colour in quotes is text, not a colour. Pass one colour or several, such as `red` or `red var(--stripe)`.

A thickness the gradient drops is refused as well, since 2.3.1: measured in Chrome 152, a unitless number other than 0 and a unit that is not a length.

Sass

.element {
  @include background-stripes(red, 2);
}

Error: `2` is not a valid $thickness for `background-stripes`: a unitless number is not a length; add a unit, such as `2px`. A browser drops the gradient.

Image paths with a space

Measured in Chrome 152, url(/img/a b.png), url(/img/a(1).png) and url(/img/it's.png) are dropped, while the same paths in quotes load the file. The mixin used to write every path unquoted, so those produced no image. It now quotes them, and only them: a plain path is written as before.

Sass

.element {
  @include background-stripes(red, 2em, -30deg, "/img/it's.png");
}