bg-color-variant()

The mixin contains the two CSS classes, the CSS class of the name prefixed with bg-, and prefixed #{$prefix}-bg- with the given $name that includes the background color of the given $color CSS variable name, and color style equal to light-color depending on whether the given SCSS variable $hex-color lightness is below 60.

By default, $prefix is equal to the globally customizable $var-prefix.

The mixin contains additional CSS class that includes in its name global prefix $var-prefix.

.#{$prefix}-bg-#{$name}

src/mixins/color/_bg-color-variant.mixin.scss

@mixin bg-color-variant($name, $color, $hex-color, $prefix: $var-prefix) {
  .bg-#{$name},
  .#{$prefix}-bg-#{$name} {
    @include background($color, $important: !important);
    @if (lightness($hex-color) < 60) {
      @include color('light');
    }
  }
}

https://github.com/angular-package/spectre.css/blob/1.0.x/src/mixins/_color.scssgithub.com

Parameters

$name: 'primary'

The suffix for the name of the contained CSS class .bg, by default it is set to primary.

$color: 'primary-color'

A color name that exists as a CSS variable of a string type is passed to the color() function to set the background color.

$hex-color: $primary-color

The hex color of the given $color CSS variable name is used to add color style equal to light-color depending on whether its lightness is below 60. By default, it is set to the $primary-color.

$prefix: $var-prefix

The parameter is to customize the prefix of the second contained CSS class name. By default, it is set to the global SASS variable $var-prefix.

Example usage

// Get mixin.
@use 'node_modules/@angular-package/spectre.css/src/mixins/color' as *;