Fundación - Flex Grid SASS Reference
Descripción
SASS (Syntactically Awesome Stylesheet) es un preprocesador de CSS, que ayuda a reducir la repetición con CSS y ahorra tiempo.
Mixins
La salida CSS final se crea usando el mixin. El mixin puede usarse para construir su propia estructura de clases a partir de estos componentes. A continuación se muestran los mixins utilizados para crear la salida CSS final.
fila de cuadrícula flexible
Se crea un contenedor para la fila de cuadrícula flexible, usando este mixin.
@include flex-grid-row($behavior, $width, $columns, $base) { }| No Señor. | Nombre y descripción | Tipo | Valor por defecto |
|---|---|---|---|
| 1 | $behavior Se modifica el estilo de cuadrícula predeterminado. |
Palabra clave o lista | nulo |
| 2 | $width Ancho máximo de fila. |
Número | $ ancho de fila de cuadrícula |
| 3 | $columns Establece el número de columnas para esta fila. |
Palabra clave o lista | nulo |
| 4 | $base Es útil para llamar a mixin dos veces en el mismo elemento, ya que crea una salida duplicada. |
Booleano | cierto |
columna de cuadrícula flexible
Las columnas de la cuadrícula flexible se crean utilizando el mixin. Usando la clase de desapilamiento en la fila flexible principal, la columna se puede estirar a todo el ancho del contenedor.
@include flex-grid-column($columns, $gutter);| No Señor. | Nombre y descripción | Tipo | Valor por defecto |
|---|---|---|---|
| 1 | $columns La función flex-grid-column () se refiere a los valores disponibles. |
Mezclado | Nulo |
| 2 | $gutter Crea espacio entre las columnas |
Número | $ grid-column-gutter |
orden de cuadrícula flexible
Se cambia la fuente de la columna de cuadrícula flexible. El número de columna más bajo aparece al principio en el diseño.
@include flex-grid-order($order);| No Señor. | Nombre y descripción | Tipo | Valor por defecto |
|---|---|---|---|
| 1 | $order Aplicar número de pedido. |
Número | 0 |
Funciones
La siguiente es la función de una cuadrícula flexible:
columna de cuadrícula flexible
La propiedad flex se calcula para la columna flex gird. El mismo valor se acepta como función básica grid-column () junto con los siguientes parámetros:
null - Expande la columna al espacio completo.
shrink - Contrae la columna.
flex-grid-column($columns)| No Señor. | Nombre y descripción | Tipo | Valor por defecto |
|---|---|---|---|
| 1 | $columns Establezca el ancho de columna particular. |
Mezclado | nulo |