Fundação - Sass Mixins

Importando

Ele importa o conteúdo dos mixins SASS que são colocados no arquivo scss / util / _mixins.scss . Você pode importar os mixins SASS usando a seguinte linha de código -

@import 'util/mixins';

Referência Sass

Você pode alterar os estilos dos componentes usando as funções SASS.

Mixins

Você pode usar os seguintes mixins para construir a estrutura de classes CSS para seus componentes.

CSS-TRIANGLE

É usado para criar setas suspensas, pips suspensas e muito mais. Ele usa o seletor <i> & :: before </i> ou <i> & :: after </i> para anexar um triângulo a um elemento existente. Ele usa o seguinte formato -

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

Ele usa os seguintes parâmetros, conforme especificado na tabela -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$triangle-size Ele define a largura do triângulo.	Número	Nenhum
2	$triangle-color Ele define a cor do triângulo.	Cor	Nenhum
3	$triangle-direction Ele define a direção do triângulo, como para cima, para a direita, para baixo ou para a esquerda.	Palavra-chave	Nenhum

HAMBURGER

É usado para criar ícone de menu com largura, altura, número de barras e cores. Ele usa o seguinte formato -

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

Ele usa os seguintes parâmetros, conforme especificado na tabela -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$color Ele define a cor do ícone.	Cor	Nenhum
2	$color-hover Ele define a cor quando você passa o mouse sobre o ícone.	Cor	Nenhum
3	$width Ele define a largura do ícone.	Número	Nenhum
4	$height Ele define a altura do ícone.	Número	Nenhum
5	$weight Ele define o peso de barras individuais no ícone.	Número	Nenhum
6	$bars Ele define o número de barras no ícone.	Número	Nenhum

BACKGROUND-TRIANGLE

É usado para especificar a imagem de fundo de um elemento. Ele usa o seguinte formato -

@include background-triangle($color);

Ele usa o parâmetro conforme especificado na tabela -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$color Ele define a cor do triângulo.	Cor	$ preto

CLEARFIX

Este mixin limpa automaticamente os elementos filhos, para que não haja necessidade de marcação adicional. Ele usa o seguinte formato -

@include clearfix;

AUTO-WIDTH

Ele dimensiona automaticamente os elementos com base no número de elementos presentes no contêiner. Ele usa o seguinte formato -

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

Ele usa os seguintes parâmetros, conforme especificado na tabela -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$max Ele identifica o número máximo de itens no contêiner.	Número	Nenhum
2	$elem Ele usa uma tag para seletores irmãos.	Palavra-chave	li

DISABLE-MOUSE-OUTLINE

Ele é usado para desativar o contorno ao redor do elemento quando identifica a ação de entrada do mouse. Ele usa o seguinte formato -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

É usado para ocultar os elementos e pode estar disponível para teclados e outros dispositivos. Ele usa o seguinte formato -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

É usado para remover os elementos invisíveis e reverter a saída CSS usando o mixin element-invisible () . Ele usa o seguinte formato -

@include element-invisible-off;

VERTICAL-CENTER

É usado para colocar os elementos centralizados verticalmente dentro do elemento pai não estático usando o seguinte formato -

@include vertical-center;

HORIZONTAL-CENTER

É usado para colocar os elementos centrados horizontalmente dentro do elemento pai não estático usando o seguinte formato -

@include horizontal-center;

ABSOLUTE-CENTER

É usado para colocar os elementos absolutamente centralizados dentro do elemento pai não estático usando o seguinte formato -

@include absolute-center;