Основа - Sass Mixins
Импорт
Он импортирует содержимое миксинов SASS, которые помещаются в файл scss / util / _mixins.scss . Вы можете импортировать миксины SASS, используя следующую строку кода -
@import 'util/mixins';Справочник Sass
Вы можете изменить стили компонентов с помощью функций SASS.
Миксины
Вы можете использовать следующие миксины для создания структуры классов CSS для ваших компонентов.
CSS-TRIANGLE
Он используется для создания выпадающих стрелок, выпадающих пунктов и многого другого. Он использует селектор <i> & :: before </i> или <i> & :: after </i> для присоединения треугольника к существующему элементу. Он использует следующий формат -
@include css-triangle($triangle-size, $triangle-color, $triangle-direction);Он использует следующие параметры, как указано в таблице -
| Sr. No. | Параметр и описание | Тип | Значение по умолчанию |
|---|---|---|---|
| 1 | $triangle-size Он определяет ширину треугольника. |
номер | Никто |
| 2 | $triangle-color Он определяет цвет треугольника. |
цвет | Никто |
| 3 | $triangle-direction Он определяет направление треугольника, например, вверх, вправо, вниз или влево. |
Ключевое слово | Никто |
HAMBURGER
Он используется для создания значка меню с шириной, высотой, количеством полос и цветами. Он использует следующий формат -
@include hamburger($color, $color-hover, $width, $height, $weight, $bars);Он использует следующие параметры, как указано в таблице -
| Sr. No. | Параметр и описание | Тип | Значение по умолчанию |
|---|---|---|---|
| 1 | $color Он определяет цвет значка. |
цвет | Никто |
| 2 | $color-hover Он определяет цвет при наведении курсора на значок. |
цвет | Никто |
| 3 | $width Он определяет ширину значка. |
номер | Никто |
| 4 | $height Он определяет высоту значка. |
номер | Никто |
| 5 | $weight Он определяет вес отдельных полосок на значке. |
номер | Никто |
| 6 | $bars Он определяет количество полосок на значке. |
номер | Никто |
BACKGROUND-TRIANGLE
Он используется для указания фонового изображения для элемента. Он использует следующий формат -
@include background-triangle($color);Он использует параметр, указанный в таблице -
| Sr. No. | Параметр и описание | Тип | Значение по умолчанию |
|---|---|---|---|
| 1 | $color Он определяет цвет треугольника. |
цвет | $ черный |
CLEARFIX
Этот миксин автоматически очищает дочерние элементы, так что нет необходимости в дополнительной разметке. Он использует следующий формат -
@include clearfix;AUTO-WIDTH
Он автоматически изменяет размер элементов в зависимости от количества элементов, присутствующих в контейнере. Он использует следующий формат -
@include auto-width($max, $elem);Он использует следующие параметры, как указано в таблице -
| Sr. No. | Параметр и описание | Тип | Значение по умолчанию |
|---|---|---|---|
| 1 | $max Он определяет максимальное количество элементов в контейнере. |
номер | Никто |
| 2 | $elem Он использует тег для родственных селекторов. |
Ключевое слово | Ли |
DISABLE-MOUSE-OUTLINE
Он используется для отключения контура вокруг элемента, когда он определяет действие ввода мыши. Он использует следующий формат -
@include disable-mouse-outline;ELEMENT-INVISIBLE
Он используется для скрытия элементов и может быть доступен для клавиатур и других устройств. Он использует следующий формат -
@include element-invisible;ELEMENT-INVISIBLE-OFF
Он используется для удаления невидимых элементов и инвертирования вывода CSS с помощью миксина element-invisible () . Он использует следующий формат -
@include element-invisible-off;VERTICAL-CENTER
Он используется для размещения элементов по вертикали внутри нестатического родительского элемента, используя следующий формат:
@include vertical-center;HORIZONTAL-CENTER
Он используется для размещения элементов по центру по горизонтали внутри нестатического родительского элемента с использованием следующего формата:
@include horizontal-center;ABSOLUTE-CENTER
Он используется для размещения элементов с абсолютным центрированием внутри нестатического родительского элемента с использованием следующего формата:
@include absolute-center;