Fundación - Sass Mixins

Importador

Importa el contenido de los mixins SASS que se colocan en el archivo scss / util / _mixins.scss . Puede importar los mixins de SASS utilizando la siguiente línea de código:

@import 'util/mixins';

Referencia de Sass

Puede cambiar los estilos de los componentes utilizando las funciones SASS.

Mixins

Puede usar los siguientes mixins para construir la estructura de clases CSS para sus componentes.

CSS-TRIANGLE

Se utiliza para crear flechas desplegables, pips desplegables y muchos más. Utiliza el selector <i> & :: before </i> o <i> & :: after </i> para adjuntar un triángulo a un elemento existente. Utiliza el siguiente formato:

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

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$triangle-size Define el ancho del triángulo.	Número	Ninguna
2	$triangle-color Define el color del triángulo.	Color	Ninguna
3	$triangle-direction Define la dirección del triángulo como arriba, derecha, abajo o izquierda.	Palabra clave	Ninguna

HAMBURGER

Se utiliza para crear iconos de menú con ancho, alto, número de barras y colores. Utiliza el siguiente formato:

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

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$color Define el color del icono.	Color	Ninguna
2	$color-hover Define el color cuando pasas el cursor sobre el icono.	Color	Ninguna
3	$width Define el ancho del icono.	Número	Ninguna
4	$height Define la altura del icono.	Número	Ninguna
5	$weight Define el peso de las barras individuales en el icono.	Número	Ninguna
6	$bars Define el número de barras en el icono.	Número	Ninguna

BACKGROUND-TRIANGLE

Se utiliza para especificar la imagen de fondo de un elemento. Utiliza el siguiente formato:

@include background-triangle($color);

Utiliza el parámetro como se especifica en la tabla -

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$color Define el color del triángulo.	Color	$ negro

CLEARFIX

Este mixin borra automáticamente los elementos secundarios, por lo que no hay necesidad de marcado adicional. Utiliza el siguiente formato:

@include clearfix;

AUTO-WIDTH

Automáticamente dimensiona los elementos en función del número de elementos presentes en el contenedor. Utiliza el siguiente formato:

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

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$max Identifica el número máximo de artículos en el contenedor.	Número	Ninguna
2	$elem Utiliza una etiqueta para los selectores de hermanos.	Palabra clave	li

DISABLE-MOUSE-OUTLINE

Se usa para deshabilitar el contorno alrededor del elemento cuando identifica la acción de entrada del mouse. Utiliza el siguiente formato:

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Se utiliza para ocultar los elementos y puede estar disponible para teclados y otros dispositivos. Utiliza el siguiente formato:

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Se utiliza para eliminar los elementos invisibles e invierte la salida de CSS mediante el mixin element-invisible () . Utiliza el siguiente formato:

@include element-invisible-off;

VERTICAL-CENTER

Se utiliza para colocar los elementos centrados verticalmente dentro del elemento principal no estático utilizando el siguiente formato:

@include vertical-center;

HORIZONTAL-CENTER

Se utiliza para colocar los elementos centrados horizontalmente dentro del elemento principal no estático utilizando el siguiente formato:

@include horizontal-center;

ABSOLUTE-CENTER

Se usa para colocar los elementos absolutamente centrados dentro del elemento padre no estático usando el siguiente formato:

@include absolute-center;