meta
column
Генерирует значение или выражение, которое позволит установить размер, в точности равный заданному количеству колонок макета.
Параметры:
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| $expression * | string|number | — | Выражение, описывающее необходимый размер в колонках макета: необходимо-колонок/всего-колонок. |
| $gutter | ?number | null | Расстояние между колонками макета. |
Возвращаемое значение:
string|number - Выражение calc или точное значение.
Пример использования:
@use 'more-sass' as more;
@debug more.column('6/12'); // number: 50%
@debug more.column('6/12', 15px); // string: calc(100% / 2 - (15px * (12 - 6) / 12))
get-char
Получает Unicode-escape значение символа по его человекопонятному имени.
Параметры:
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| $char * | string | — | Человекопонятное имя символа. |
Возвращаемое значение:
?string - Unicode-escape значение символа, или null если переданное имя символа не зарегистрировано.
Пример использования:
@use 'more-sass' as more;
@debug more.get-char('dollar'); // string: '\0024'
dollar | $ |
section | § |
bullet | • |
hyphen | ‑ |
en-dash | – |
em-dash | — |
copyright | © |
registered | ® |
degree | ° |
ring | ∘ |
infinity | ∞ |
triangle-up-black | ▲ |
triangle-up-white | △ |
triangle-right-black | ▶ |
triangle-right-white | ▷ |
triangle-down-black | ▼ |
triangle-down-white | ▽ |
triangle-left-black | ◀ |
triangle-left-white | ◁ |
circle-black | ● |
circle-white | ○ |
square-black | ■ |
square-white | □ |
diamond-black | ◆ |
diamond-white | ◇ |
diamond-inside | ◈ |
check | ✓ |
check-heavy | ✔ |
cross | ✕ |
cross-heavy | ✖ |
fisheye | ◉ |
offset
Генерирует значение или выражение, которое позволит установить размер, в точности равный заданному количеству колонок макета, плюс дополнительный отступ, равный расстоянию между колонками.
Параметры:
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| $expression * | string|number | — | Выражение, описывающее необходимый размер в колонках макета: необходимо-колонок/всего-колонок. |
| $gutter | ?number | null | Расстояние между колонками макета. |
Возвращаемое значение:
string|number - Выражение calc или точное значение.
Пример использования:
@use 'more-sass' as more;
@debug more.offset('6/12'); // number: 50%
@debug more.offset('6/12', 15px); // string: calc(calc(100% / 2 - (15px * (12 - 6) / 12)) + 15px)
parse-directions
Разбирает переданный список значений используя стандартный порядок CSS (top, right, bottom, left).
Значения могут быть пропущены используя null (предпочтительно) или его псевдоним n.
Параметры:
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| $values * | list | — | Список значений. |
Возвращаемое значение:
map - Полный набор свойств позиционирования в формате (position: value).
Пример использования:
@use 'more-sass' as more;
@debug more.parse-directions(1px 2px 3px 4px); // map: (top: 1px, right: 2px, bottom: 3px, left: 4px)
@debug more.parse-directions(1px, 2px, 3px, 4px); // map: (top: 1px, right: 2px, bottom: 3px, left: 4px)
@debug more.parse-directions(null, 2px, n, 4px); // map: (top: null, right: 2px, bottom: null, left: 4px)