Фонд — Sass функции

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

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

@import 'util/util';

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

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

Sass Reference

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

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

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

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

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

$ цвет

Проверяет легкость цвета.

$ да

Если цвет светлый, он возвращает цвет $ yes .

$ нет

Если цвет темный, он возвращает $ no color.

$ пороговая

Он представляет собой порог легкости.

смарт-шкала

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

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

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

$ цвет

Используется для масштабирования цвета.

$ шкала

Указывает процент увеличения или уменьшения.

$ пороговая

Он представляет собой порог легкости.

текстовые входы

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

text-inputs($types)

Он использует параметр, указанный в следующей таблице:

$ типы

Он предоставляет несколько типов ввода текста для создания селектора.

стрип-модуль

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

strip-unit($num)

Он использует параметр, указанный в следующей таблице:

$ Num

Указывает номер при удалении единицы из значения.

рем-известково

Это изменяет значение пикселя, чтобы соответствовать значениям rem. Он использует следующий формат для преобразования значений пикселей в значения rem —

rem-calc($values, $base)

Используются следующие параметры, указанные в таблице:

$ значения

Он преобразует значения пикселей в значения rem и разделяет их, используя пробелы. Если вы преобразуете разделенный запятыми список, заключите его в скобки.

$ база

Он обеспечивает базовое значение при преобразовании пикселя в значение rem. Если для базы есть нулевое значение, то функция использует переменную $ base-font-size в качестве базы.

имеет-значение

Указывает значение, если оно не ложно. Ложные значения включают ноль, нет, 0 или пустой список. Он использует следующий формат для указания значения —

has-value($val)

Он использует параметр, указанный в следующей таблице:

$ Вэл

Проверяет указанное значение.

получить на стороне

Он определяет сторону значения и определяет верхние / правые / нижние / левые значения для отступов, полей и т. Д. Он использует следующий формат для указания стороны значения —

has-value($val)

Используются следующие параметры, указанные в таблице:

$ Вэл

Он указывает сторону значения.

$ сторона

Он определяет, с какой стороны должно возвращаться (верхнее / правое / нижнее / левое) значение.

получить границы значение

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

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

Используются следующие параметры, указанные в таблице:

$ Вэл

Он находит конкретное значение границы.

$ эль

Используется для извлечения компонента границы.