@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.

Install

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

Usage

1. Import the library from the node_modules folder.

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

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

Functions - units

px-to-rem($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);

rem-to-px($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(5rem);

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);

Functions - maps

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);

reverse-map($map)

Reverses the order of the keys in a map

Parameters

• $map: the target map that should be reversed

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");

Functions - get-breakpoint($name)

This function assumes you have a $breakpoints map defined and retrieves the width defined within the breakpoint key.

Parameters:

• $name: the name of the breakpoint key within the $breakpoints variable

$breakpoints: (
	viewport-9: (
		width: 960px
	),
	viewport-12: (
		width: 1200px
	)
);

get-breakpoint("viewport-9");