Fundación - SASS Mixins

La salida CSS final se crea utilizando el mixin. El mixin se puede utilizar para construir su propia estructura de clases a partir de estos componentes. A continuación se muestra el mixin utilizado para crear la salida CSS final.

columna de cuadrícula

Se crea la columna de cuadrícula.

@include grid-column($columns, $gutter);

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$columns Establece el ancho de la columna. La función grid-column () se refiere a los valores disponibles.	Mezclado	$ recuento de columnas de cuadrícula
2	$gutter Crea espacio entre las columnas.	Número	$ grid-column-gutter

rejilla-columna-fila

Incluye la clase de fila y columna de forma equivalente al mismo elemento. losgrid-col-row() es la función asumida.

@include grid-column-row($gutter);

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$gutter Establece el ancho a ambos lados de la fila de columnas de las canaletas.	Número	$ grid-column-gutter

colapso-columna-cuadrícula

Los canalones colapsan en la columna después de que se quita el acolchado. La función asumida esgrid-col-collapse()

@include grid-column-collapse;

cuadrícula-columna-uncollapse

Las canaletas se despliegan en una columna después de volver a agregar el relleno. La función asumida esgrid-col-uncollapse()

@include grid-column-uncollapse;

diseño de cuadrícula

Establece tamaños para los elementos secundarios de modo que el número especificado en $n aparece en cada fila.

@include grid-layout($n, $selector);

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$n Número de elementos para mostrar por fila.	Número	Ninguna
2	$selector Selector (es) a utilizar para elementos secundarios.	Cuerda	'.columna'

posición-columna-cuadrícula

Las columnas están reorganizadas. La función asumida esgrid-col-pos().

@include grid-column-position($position);

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$position Establece la dirección para mover la columna según el recuento de columnas especificado. Los números negativos empujan la columna hacia la izquierda y el número positivo hacia el lado derecho.	Número	Ninguna

rejilla-columna-desposicion

Se restablece la posición de la columna. La función asumida esgrid-col-unpos().

@include grid-column-unposition;

desplazamiento de columna de cuadrícula

La columna está desplazada a la derecha por $ncolumnas. La función asumida esgrid-col-off().

@include grid-column-offset($n);

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$n Cualquier valor es aceptado por el mixin grid-column ().	Número o lista	Ninguna

fin de columna de cuadrícula

El comportamiento predeterminado de la última columna de una fila está deshabilitado que se alinea con el borde opuesto. La función asumida esgrid-col-end().

@include grid-column-end;

contexto de cuadrícula

Para usar diferentes columnas, se debe cambiar el comportamiento de las columnas definidas dentro de este mixin.

@include grid-context($columns, $root) { }

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$columns Número de columnas a utilizar.	Número	Ninguna
2	$root Dentro de la mezcla, los selectores se anidarán dentro del selector principal cuando se establezca como falso.	Booleano	falso

fila de cuadrícula

Se crea una fila de cuadrícula.

@include grid-row($columns, $behavior, $width, $cf) { }

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$columns Establece el número de columnas para esta fila.	Número	Nulo
2	$behavior Se modifica el estilo de cuadrícula predeterminado.	Palabras clave	Nulo
3	$width Ancho máximo de fila.	Número	$ ancho de fila de cuadrícula
4	$cf Ya sea para incluir el clearfix o no.	Booleano	cierto

tamaño de columna de cuadrícula

Se establece el ancho de la columna de la cuadrícula.

@include grid-column-size($width);

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$width La función grid-column () acepta cualquier valor pasado. Establecer el ancho de la columna.	Número o lista	$ recuento de columnas de cuadrícula