@littlemissrobot/sass-functions

Little Miss Robot - Sass functions

This repository contains SASS functions that we, at Little Miss Robot, like to use to make our wonderful lives in the world of SASS easier and more managable.

Info

This package contains no styling but simply provides a couple of functions that execute a simple task. This is specifically made for SASS and cannot be used in any other language.

Install

$ npm install --save-dev @littlemissrobot/sass-functions

Usage

1. Import the library from the node_modules folder.

@import "~@littlemissrobot/sass-functions/lib/main";

1. That's it! The functions that are present within this file are now available to you!

Functions

escape-chars($value)

Escapes special characters in SASS to be used in for example, class names. It places backward slashes in front of the special characters to escape them.

Supported characters (will get extended):

• % is changed to %
• . is changed to .

Parameters:

• $value: the string that contain characters that needs to be escaped

escape-chars("100%");

is-number($value)

Checks if the passed value is a number and returns a boolean.

Parameters:

• $value: the value that should get checked

is-number($value);

list-contains($list, $item)

Checks if a list contains a certain item and returns a boolean.

Parameters:

• $list: the list that contains multiple items
• $item: the item to look for in the list

$list: (1, 2, 3);
$item: 1;

list-contains($list, $item);

map-collect($maps...)

The standard map-merge function only lets you merge 2 maps together. This function makes use of map-merge but merges as much maps together as you want.

Parameters

• $maps...: comma seperated maps that should all get merged together.

map-collect($map1, $map2, $map3);

px-to-rem($value, $normalize)

Convert a pixel value to a rem value. Do note that we assume here that on the html tag you have defined that the font-size is 62.5%, to make sure that the 1rem is equal to 10px. If you want to overwrite this than you can simply pass a second parameter that indicates how much 1rem is in pixels.

Parameters:

• $value: the amount of pixels to be converted to rem
• $normalize: the amount of pixels that is equal to 1 rem, defalut is 10px

margin: px-to-rem(50px);

random-number($min, $max)

Generate a random number between a minimum and maximum value. This returns a randomised number between the range.

Parameters:

• $min: the minimum value to generate the number between
• $max: the maximum value to generate the number between

margin: random-number(2rem, 10rem);
margin: random-number(20px, 100px);

rem-to-px($value, $normalize)

Convert a rem value to a pixel value. Do note that we assume here that on the html tag you have defined that the font-size is 62.5%, to make sure that the 1rem is equal to 10px. If you want to overwrite this than you can simply pass a second parameter that indicates how much 1rem is in pixels.

Parameters:

• $value: the amount of rem to be converted to pixels
• $normalize: the amount of pixels that is equal to 1 rem, defalut is 10px

margin: rem-to-px(5rem);

reverse-map($map)

Reverses the order of the keys in a map

Parameters

• $map: the target map that should be reversed

reverse-map($breakpoints);

set-px($value)

Converts any value into a pixel, only if it is supported within the function.

Supported values (get expanded):

• rem to pixel

Parameters

• $value: the value that should get converted to a pixel.

reverse-map($breakpoints);

str-replace($string, $search, $replace)

Searches a string for a certain character or group of characters and replaces it with the passed character(s).

Parameters:

• $string: the string to search for and replace
• $search: the character(s) to search for in the string
• $replace: the character(s) to replace the searched characters with

str-replace("Drupal 4 life", "Drupal", "Craft");

str-split($string, $separator)

Create a list from a string by defining a character to split the string at.

Parameters:

• $string: the string to split and create a list from
• $separator: the character(s) to split the string at

$string: "Batman Superman Flash";
$separator: " ";

str-split($string, $separator);

strip-unit($value)

Removes the unit from a value. For example: 10px becomes 10.

Parameters:

• $value: the value that should get its units stripped

strip-unit(10px);

to-string($value)

Converts a value to a string

Parameters:

• $value: the value that should get converted to a string

to-string(10)

trim-map-to($map, $target)

Trims a map to a certain target key. Returns a new map that is trimmed down until the key is met.

Parameters:

• $map: the map that needs to be trimmed
• $target: the target key that needs to be met

trim-map-to($breakpoints, "viewport-9");

trim-reverse-map-to($map, $target)

Trims a map to a certain target key. Reverses the map to start from the top and goes down to the bottom. It trims the keys until the target is met.

Parameters:

• $map: the map that needs to be trimmed
• $target: the target key that needs to be met

trim-reverse-map-to($breakpoints, "viewport-9");