Foundation - Sass Functions


Advertisements


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 −

S. 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 −

S. 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 −

S. 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 −

S. 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 −

S. 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 −

S. 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 −

S. 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 −

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


Advertisements
E-Books Store