Work in progress
Version 1.5.7
Last updated 7.15.2024

Sass Functions

Source:main.scss, line 19

Is Direction

This tests if $value is a valid direction.

Function

@function is-direction($value) {
  $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
  @return $is-keyword or $is-angle;
}

Parameters:

Name	Description	Default Value
`$value`	The value you want to test	null

Example Usage

.example {
  background: -webkit-linear-gradient(is-direction(-45deg), #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Compiled Output

.example {
  background: -webkit-linear-gradient(135deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Source:custom/helpers/mixins/_linear-gradient.scss, line 54

Is Direction

This tests if $value is a valid direction.

Function

@function is-direction($value) {
  $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
  @return $is-keyword or $is-angle;
}

Parameters:

Name	Description	Default Value
`$value`	The value you want to test	null

Example Usage

.example {
  background: -webkit-linear-gradient(is-direction(-45deg), #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Compiled Output

.example {
  background: -webkit-linear-gradient(135deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Source:global-scss/helpers/mixins/_linear-gradient.scss, line 54

Legacy Direction

This converts a direction to legacy syntax.

Function

@function legacy-direction($value) {
  @if is-direction($value) == false {
    @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
  }
  $conversion-map: (
    to top: bottom,
    to top right: bottom left,
    to right top: left bottom,
    to right: left,
    to bottom right: top left,
    to right bottom: left top,
    to bottom: top,
    to bottom left: top right,
    to left bottom: right top,
    to left: right,
    to left top: right bottom,
    to top left: bottom right
  );
  @if map-has-key($conversion-map, $value) {
    @return map-get($conversion-map, $value);
  }
  @return 90deg - $value;
}

Parameters:

Name	Description	Default Value
`$value`	The value you want to convert	null

Example Usage

.example {
  background: linear-gradient(legacy-direction(to top), #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Compiled Output

.example {
  background: linear-gradient(bottom, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Source:custom/helpers/mixins/_linear-gradient.scss, line 89

Legacy Direction

This converts a direction to legacy syntax.

Function

@function legacy-direction($value) {
  @if is-direction($value) == false {
    @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
  }
  $conversion-map: (
    to top: bottom,
    to top right: bottom left,
    to right top: left bottom,
    to right: left,
    to bottom right: top left,
    to right bottom: left top,
    to bottom: top,
    to bottom left: top right,
    to left bottom: right top,
    to left: right,
    to left top: right bottom,
    to top left: bottom right
  );
  @if map-has-key($conversion-map, $value) {
    @return map-get($conversion-map, $value);
  }
  @return 90deg - $value;
}

Parameters:

Name	Description	Default Value
`$value`	The value you want to convert	null

Example Usage

.example {
  background: linear-gradient(legacy-direction(to top), #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Compiled Output

.example {
  background: linear-gradient(bottom, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Source:global-scss/helpers/mixins/_linear-gradient.scss, line 89

Em Units

This Convert a pixel value to em. Useful for things like letter-spacing.

Function

@function em($pixel, $context: $base-font-size) {
  @return #{$pixel / $context}em;
}

Parameters:

Name	Description	Default Value
`$pixel`	The value you want to convert to em	null
`$context`	The base font size assigned to	$base-font-size

Example Usage

h1 {
 letter-spacing: em(1px);
}

Compiled Output

h1 {
  letter-spacing: 0.0625em;
}

Source:global-scss/helpers/functions/_em.scss, line 1

This is a mixin to mimic the behavior of native css clamp() while supporting Safari 12.x and 13.0. Clamps a value between an upper and lower bound while selecting a middle value within a range of values between a defined minimum and maximum. See https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() for more info.

Function

@function is-clamp($min, $val, $max) {
  @return Min(Max($min, $val), $max);
}

Parameters:

Name	Description	Default Value
`$min`	Lower bound	null
`$val`	Preferred value. Should be either `vw` or `%`	null
`$max`	Upper bound	null

Example Usage

.h1 {
  font-size: is-clamp(rem(26px), 7vw, rem(48px));
}

Compiled Output

.h1 {
  font-size: Min(Max(1.625rem, 7vw), 3rem);
}

Source:global-scss/helpers/functions/_is-clamp.scss, line 1

Primary Color

This gets HEX value from Sass map.

Function

@function primary-color($color, $tone: base) {
  @return map-get(map-get($primarycolors, $color), $tone);
}

Parameters:

Name	Description	Default Value
`$color`	Color name from the Sass map	null
`$tone`	Tone (tint or shade)	base

Example Usage

  color: primary-color(orange, dark);

Compiled Output

  color: #f2530f;

Source:global-scss/helpers/functions/_primary-color.scss, line 1

Secondary Color

This gets HEX value from Sass map.

Function

@function secondary-color($color, $tone: base) {
  @return map-get(map-get($secondarycolors, $color), $tone);
}

Parameters:

Name	Description	Default Value
`$color`	Color name from the Sass map	null
`$tone`	Tone (tint or shade)	base

Example Usage

  color: secondary-color(orange, dark);

Compiled Output

  color: #f2530f;

Source:global-scss/helpers/functions/_secondary-color.scss, line 1

Social Media Color

This gets HEX value from Sass map for social media platforms.

Function

@function sm-color($platform) {
  @return map-get($socialmediacolors, $platform);
}

Parameters:

Name	Description	Default Value
`$platform`	Name of social media platform	null

Example Usage

  color: sm-color(facebook);

Compiled Output

  color: #3b5998;

Source:global-scss/helpers/functions/_sm-color.scss, line 1