Functions

This is where we define custom functions for our framework. These functions are global and don’t apply specifically to a single element/block component.

map-extend

jQuery-style extend function for when map-merge() isn’t enough. Use when you need to merge more than two maps and/or need a merge to be recursive.

map-extend( $map, $maps..., $deep )
Parameter Type Default Description
$map Map None The first map.
$maps... Map None A list of all other maps.
$deep Boolean false Whether or not to enable recursive mode.
Return Merged map

Example Usage

$grid-a: (
  'columns': 12,
  'layouts': (
    'small': 800px,
    'medium': 1000px,
    'large': 1200px,
  ),
);

$grid-b: (
  'layouts': (
    'large': 1300px,
    'huge': 1500px
  ),
);

$grid-c: (
  'direction': 'ltr',
  'columns': 16,
  'layouts': (
    'large': 1300px,
    'huge': 1500px
  ),
);

// Not deep
$map: map-extend($grid-a, $grid-b, $grid-c);
// -> ("columns": 16, "layouts": ("large": 1300px, "huge": 1500px), "direction": "ltr")

// Deep
$map: map-extend($grid-a, $grid-b, $grid-c, true);
// -> ("columns": 16, "layouts": ("small": 800px, "medium": 1000px, "large": 1300px, "huge": 1500px), "direction": "ltr")

map-fetch

An easy way to fetch a value in a multi-level map. Works much like map-get() except that you pass multiple keys as the second variable argument to go down multiple levels in the nested map.

map-fetch( $map, $keys... )
Parameter Type Default Description
$map Map None The multiple level map to search.
$keys... List None List of keys to search in nested map.
Return Map value

Example Usage

$grid-a: (
  'columns': 12,
  'layouts': (
    'small': 800px,
    'medium': 1000px,
    'large': 1200px,
  ),
);

// Using `map-get`
$map: map-get(map-get($grid-a, 'layouts'), 'medium');
// -> 1000px

// Using `map-fetch`
$map: map-fetch($grid-a, 'layouts', 'medium');
// -> 1000px

map-set

An easy way to set a deep value in a multi-level map. By passing in a map, value and keys to the original map value you want changed.

map-set( $map, $value, $keys... )
Parameter Type Default Description
$map Map None The map to update.
$value Value None The new value to set.
$keys... List None Keys to the multiple level map to update.
Return Updated map

Example Usage

$grid-a: (
  'columns': 12,
  'layouts': (
    'small': 800px,
    'medium': 1000px
  )
);

$map: map-set($grid-a, 1300px, 'layouts' 'medium');
// -> ("columns": 12, "layouts": ("small": 800px, "medium": 1300px))

strip-units

Strips the unit from a value. For example, if you pass it 12px, it will strip off the px unit and return the number 12.

strip-units( $val )
Parameter Type Default Description
$val Unit (pixel, em, percent, number) None A unit value to strip.
Return Unitless number

px-to-em

Converts a pixel value to ems. By default it’ll use the base font size, but can be passed a custom base font size instead.

px-to-em( $px, $base )
Parameter Type Default Description
$px Unit (pixel, number) None The pixel value to be converted.
$base Unit (pixel, number) $base-font-size The base font-size the conversion should use.
Return Unit (em)

px-to-rem

Converts a pixel value to rems. Rem units use the base font size set on the <html> element which BaseWeb uses $base-font-size to set.

px-to-rem( $px )
Parameter Type Default Description
$px Unit (pixel, number) None The em value to be converted.
Return Unit (em)

em-to-px

Converts an em value to pixels. By default it’ll use the base font size, but can be passed a custom base font size instead.

em-to-px( $em, $base )
Parameter Type Default Description
$em Unit (em, number) None The em value to be converted.
$base Unit (pixel, number) $base-font-size The base font-size the conversion should use.
Return Unit (em)

font-weight

Output the font weight using the weight key to output the number weight.

font-weight( $weight );
Parameter Type Options Default
$weight String 'hairline', 'thin', 'light', 'regular', 'medium', 'semi-bold', 'bold', 'extra-bold', 'black' None
Return Font-weight value

Example Usage

// SCSS input
h1 {
  font-weight: font-weight('light');
}

// CSS output
h1 {
  font-weight: 300;
}
Weight Name Value Output
hairline 100
thin 200
light 300
regular 400
medium 500
semi-bold 600
bold 700
extra-bold 800
black 900