Foundation - Sass Functions

Foundation provides set of SASS utility functions which can be used with util, color, selector, unit, value and many more utilities.
You can import all utility files at a time by using below line of code:

@import 'util/util';

or even you can import individual utility file as shown below:

@import 'util/color'; 


@import 'util/selector'; 


@import 'util/unit'; 


@import 'util/value';

Sass Reference

You can change the styles of the components by using following SASS functions.

foreground

It provides foreground color for the elements based on the background color. It uses below format for assigning different types of parameters:

foreground($color, $yes, $no, $threshold)

The above parameters are specified in the below table:

S.N.	Parameter & Description	Type	Default Value
1	$color It checks the lightness of the color.	Color	None
2	$yes If color is light, then it returns the $yes color.	Color	$black
3	$no If color is dark, then it returns the $no color.	Color	$white
4	$threshold It represents the threshold of the lightness.	Percentage	60%

smart-scale

It provides appropriate color for the elements according to its lightness. It uses below format for specifying appropriate color:

smart-scale($color, $scale, $threshold)

The above parameters are specified in the below table:

S.N.	Parameter & Description	Type	Default Value
1	$color It is used to scale the color.	Color	None
2	$scale It specifies the percentage to scale up or down.	Percentage	5%
3	$threshold It represents the threshold of the lightness.	Percentage	40%

text-inputs

It creates a selector while using text input type. It uses below format for specifying input types:

text-inputs($types)

It uses the parameter as specified in the below table:

S.N.	Parameter & Description	Type	Default Value
1	$types It provides number of text input types for generating a selector.	Color	-

strip-unit

It removes the unit from the value and returns only the number. It uses below format for removing the unit from value:

strip-unit($num)

It uses the parameter as specified in the below table:

S.N.	Parameter & Description	Type	Default Value
1	$num It specifies the number when you remove the unit from the value.	Color	None

rem-calc

It changes the pixel value to matching rem values. It uses below format for converting pixel values to rem values:

rem-calc($values, $base)

It uses following parameters as specified in the table:

S.N.	Parameter & Description	Type	Default Value
1	$values It converts pixel values to rem values and separate them using spaces. If you are converting comma separated list, then wrap list in parentheses.	Number or List	None
2	$base It provides base value while converting pixel to rem value. If there is null value for the base, then function uses $base-font-size variable as the base.	Number	null

has-value

It specifies the value if it is not falsey. The falsey values include null, none, 0 or an empty list. It uses below format for specifying the value:

has-value($val)

It uses the parameter as specified in the below table:

S.N.	Parameter & Description	Type	Default Value
1	$val It checks the specified value.	Mixed	None

get-side

It specifies the side of a value and defines top/right/bottom/left values on padding, margin etc. It uses below format for specifying the side of a value:

has-value($val)

It uses following parameters as specified in the table:

S.N.	Parameter & Description	Type	Default Value
1	$val It specifies the side of a value.	List or Number	None
2	$side It determines on which side(top/right/bottom/left) value should return.	Keyword	None

get-border-value

It determines the border value of an element. It uses below format for specifying the border value:

get-border-value($val, $elem)

It uses following parameters as specified in the table:

S.N.	Parameter & Description	Type	Default Value
1	$val It finds a specific value of the border.	List	None
2	$elem It is used to extract the border component.	Keyword	None