SCSS functions

You can use the following functions in your SCSS. The functions should help you create SCSS easier. The use of functions also helps to prevent user errors.

rem-calc($px)

You can use the function rem-calc() to convert px into rem. The variable $font-size which can be found in _settings.scss is used to calculate the rem value.

		
height: rem-calc(16px);
margin: rem-calc(-16px);
		
	

em-calc($px)

You can use the function em-calc() to convert px into em. The variable $font-size which can be found in _settings.scss is used to calculate the em value.

		
height: em-calc(16px);
margin: em-calc(-16px);
		
	

color($color, $accent)

You can use the color function to find a accent color. The first parameter is the color of which you would like to find an accent color of. The second parameter is the accent you want to get.

		
color($blue, 200) // Returns #90CAF9
		
	

decimal-round($number, $decimals)

You can use the decimal-round() function to get a decimal number returned.

		
decimal-round(20.02221, 2); // returns 20.02
		
	

in-array($value, $array)

You can use the in-array() function to get check if a value is in an array.

		
in-array(1, (29, 10, 3, 4, 3, 1)); // returns true
in-array(1, (29, 10, 3, 4, 3)); // returns false