Основание — Sass Mixins

Он импортирует содержимое миксинов SASS, которые находятся в файле scss / util / _mixins.scss . Вы можете импортировать миксины SASS, используя следующую строку кода:

@import 'util/mixins';

Sass Reference

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

Примеси

Вы можете использовать следующие миксины для построения структуры класса CSS для ваших компонентов.

CSS-ТРЕУГОЛЬНИК

Он используется для создания выпадающих стрелок, выпадающих пипсов и многого другого. Он использует селектор <i> & :: before </ i> или <i> & :: after </ i> для присоединения треугольника к существующему элементу. Он использует следующий формат —

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

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

$ треугольник размера

Он определяет ширину треугольника.

$ треугольник цвет

Он определяет цвет треугольника.

$ треугольных направление

Он определяет направление треугольника, например, вверх, вправо, вниз или влево.

ГАМБУРГЕР

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

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

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

$ цвет

Он определяет цвет значка.

$ цветного парение

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

$ ширина

Он определяет ширину иконки.

$ высота

Это определяет высоту иконы.

$ вес

Он определяет вес отдельных столбцов в иконке.

$ баров

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

ПРЕДПОСЫЛКИ-ТРЕУГОЛЬНИК

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

@include background-triangle($color);

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

$ цвет

Он определяет цвет для треугольника.

CLEARFIX

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

@include clearfix;

AUTO-WIDTH

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

@include auto-width($max, $elem);

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

$ макс

Он определяет максимальное количество элементов в контейнере.

$ эль

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

DISABLE-MOUSE-ПЛАН

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

@include disable-mouse-outline;

ELEMENT-INVISIBLE

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

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Он используется для удаления невидимых элементов и инвертирует вывод CSS с помощью mixin element-invisible () . Он использует следующий формат —

@include element-invisible-off;

ВЕРТИКАЛЬ-CENTER

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

@include vertical-center;

ГОРИЗОНТАЛЬНЫЙ-CENTER

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

@include horizontal-center;

АБСОЛЮТ-ЦЕНТР

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