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;