Functions

Collection of functions available during SCSS styling.

@import '@bbc/front-end-kit/scss/helpers/main';

Shadow by angle

Converts Photoshop-style shadow values (angle + distance) into CSS box-shadow x/y offsets. No need to calculate x/y by hand.

// shadow-by-angle.scss
.element {
    box-shadow: shadow-by-angle($angle, $distance, $blursize, $color, $inset: false);
}

Parameters

• $angle (Number, degrees): Direction of the light source. 0 = top, 90 = right, 180 = bottom, 270 = left.
• $distance (Length): Offset distance (e.g. 4px).
• $blursize (Length): Blur radius (e.g. 8px).
• $color (Color): Shadow color.
• $inset (Boolean, default false): Emit an inset shadow.

Returns

A space-separated shadow value ready for use in box-shadow.

Drop shadow by angle

Shortcut for CSS drop-shadow() filters using the same angle-based API.

// shadow-by-angle.scss
.element {
    filter: drop-shadow(drop-shadow-by-angle($angle, $distance, $blursize, $color));
}

Parameters

Same as shadow-by-angle.

Returns

A space-separated drop-shadow value ready for use inside filter: drop-shadow(...).

String Replace

Replaces all occurrences of $search in $string with $replace. Used internally by other helpers.

// str-replace.scss
$result: str-replace($string, $search, $replace: '');

Parameters

• $string (String): The string to manipulate.
• $search (String): The value to find and replace.
• $replace (String, default ''): The replacement value.

Returns

String — the modified string.

Strip Unit

Strips the unit from a number, returning the bare numeric value.

// strip-unit.scss
.element {
    top: 100px * strip-unit(5%); // = 100px * 5
}

Parameters

• $number (Number): A value with a unit (e.g. 5%, 12px). Returns the number unchanged if it has no unit or is not a number.

Returns

Number — the unitless value.

Strip Whitespace

Strips all whitespace characters from a string.

// strip-whitespaces.scss
font-family: strip-whitespaces('Open Sans'); // → OpenSans

Parameters

• $str (String): The string to strip.

Returns

String — the string with all spaces removed.