”;
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 |
$color It checks the lightness of the color. |
Color | None |
| 2 |
$yes If the color is light, then it returns $yes color. |
Color | $black |
| 3 |
$no If the color is dark, then it returns $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 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 |
$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 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 |
$types It 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 |
$num It 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 |
$values It 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 |
$base It 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 |
$val It 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 |
$val It specifies the side of a value. |
List or Number | None |
| 2 |
$side It 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 |
$val It finds a specific value of the border. |
List | None |
| 2 |
$elem It is used to extract the border component. |
Keyword | None |
”;