Основы - Функции Sass

Foundation предоставляет набор служебных функций SASS, которые можно использовать с util , color , selector , unit , value и многими другими.

Вы можете импортировать все служебные файлы за раз, используя следующую строку кода -

@import 'util/util';

Вы также можете импортировать отдельные служебные файлы, как показано ниже -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Справочник Sass

Вы можете изменить стили компонентов, используя следующие функции SASS.

передний план

Он обеспечивает цвет переднего плана элементам на основе цвета фона. Он использует следующий формат для назначения различных типов параметров -

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

Вышеуказанные параметры указаны в следующей таблице -

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$color Проверяет яркость цвета.	цвет	Никто
2	$yes Если цвет светлый, возвращается цвет $ yes .	цвет	$ черный
3	$no Если цвет темный, возвращается $ no color.	цвет	$ белый
4	$threshold Он представляет собой порог легкости.	Процент	60%

умные весы

Он обеспечивает соответствующий цвет элементам в соответствии с их легкостью. Он использует следующий формат для указания соответствующего цвета -

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

Вышеуказанные параметры указаны в следующей таблице -

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$color Он используется для масштабирования цвета.	цвет	Никто
2	$scale Он указывает процентное значение для увеличения или уменьшения.	Процент	5%
3	$threshold Он представляет собой порог легкости.	Процент	40%

текстовые поля

Он создает селектор при использовании типа ввода текста. Он использует следующий формат для указания типов ввода -

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