Functions

Foundation provides a set of SASS utility functions, which can be used with util, color, selector, unit, value and many more.

You can import all utility files at a time by using the following line of code −

@import 'util/util';

You can also import individual utility files 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 the following SASS functions.

foreground

It provides the foreground color to the elements based on the background color. It uses the following format for assigning different types of parameters −

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

The above parameters are specified in the following table −

Sr.No.	Parameter & Description	Type	Default Value
1	$colorIt checks the lightness of the color.	Color	None
2	$yesIf the color is light, then it returns $yes color.	Color	$black
3	$noIf the color is dark, then it returns $no color.	Color	$white
4	$thresholdIt represents the threshold of the lightness.	Percentage	60%

smart-scale

It provides appropriate color for the elements according to its lightness. It uses the following format for specifying the appropriate color −

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

The above given parameters are specified in the following table −

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

text-inputs

It creates a selector while using the text input type. It uses the following format for specifying the input types −

text-inputs($types)

It uses the parameter as specified in the following table −

Sr.No.	Parameter & Description	Type	Default Value
1	$typesIt provides a 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 the following format for removing the unit from value −

strip-unit($num)

It uses the parameter as specified in the following table −

Sr.No.	Parameter & Description	Type	Default Value
1	$numIt specifies the number when you remove the unit from the value.	Color	None

rem-calc

It changes the pixel value to match the rem values. It uses the following format for converting pixel values to rem values −

rem-calc($values, $base)

It uses the following parameters as specified in the table −

Sr.No.	Parameter & Description	Type	Default Value
1	$valuesIt converts the 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	$baseIt provides the base value while converting pixel to rem value. If there is null value for the base, then function uses the $base-font-size variable as the base.	Number	null

has-value

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

has-value($val)

It uses the parameter as specified in the following table −

Sr.No.	Parameter & Description	Type	Default Value
1	$valIt checks the specified value.	Mixed	None

get-side

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

has-value($val)

It uses the following parameters as specified in the table −

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

get-border-value

It determines the border value of an element. It uses the following format for specifying the border value −

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

It uses the following parameters as specified in the table −

Sr.No.	Parameter & Description	Type	Default Value
1	$valIt finds a specific value of the border.	List	None
2	$elemIt is used to extract the border component.	Keyword	None