tools
functions
map-deep-get
@function map-deep-get($map, $keys...) { ... }Description
Fetch nested keys and test if map got all $keys nested with each others
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$map | Map | Map | — none |
$keys | Keys to test | Arglist | — none |
Throws
ERROR. No property found for
#{$key}in map. Property omitted.
Author
Hugo Giraudel
if-important
@function if-important($important) { ... }Description
Add in mixin to include "!important" in argument list if needed
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$important | — none | String | — none |
Used by
- [mixin]
custom-prop-fallback - [mixin]
custom-prop-fallback - [mixin]
custom-prop-fallback - [mixin]
custom-prop-fallback
General
functions
hexToRGB
@function hexToRGB() { ... }Description
convert hex color code to RGB without the need for duplication
Parameters
None.
mixins
add-backdrop-filter
@mixin add-backdrop-filter($blur: 16px) { ... }Description
check for backdrop filter support
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$blur | sets the blur spread for the targeted element | String | 16px |
custom-prop-fallback
@mixin custom-prop-fallback($prop, $renderedValue, $renderedValueCustomProp:: $renderedValue, $important: false, $negativeValue: false) { ... }Description
Mixin used to implement CSS variables for themes
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$prop | CSS property | Property | — none |
$renderedValue | CSS property value | Type | — none |
$renderedValueCustomProp: | CSS custom prop name | Value | $renderedValue |
$important | include important if needed | Type | false |
$negativeValue | change value to its negative counterpart if needed | Type | false |
Example
customPropColorFallback
@include customPropColorFallback('background-color', $primary-10, bg-color)
// background-color: red;Requires
- [function]
if-important - [function]
if-important - [function]
if-important - [function]
if-important
css
.#{$namespace}centeredBgi, .centeredBgi
.#{$namespace}centeredBgi,
.centeredBgi { ... }Description
Use