Share
Ahora que tiene lo básico en su haber, en este segundo tutorial sobre Nins mixins, voy a profundizar un poco más, explorando otros mixins e introduciendo una función..
Vamos a ver lo siguiente:
En el último par de años, la importancia de los diseños flexibles que responden al panorama en constante evolución de los tamaños y dispositivos de pantalla se ha dejado bastante claro. En este sentido, Bourbon Neat lo respalda, brindándole un enfoque elegante para administrar las consultas de medios para sus grillas. Mediante el uso de consultas de medios dirigidas inteligentes, su diseño se puede adaptar a una amplia gama de dispositivos sin causar problemas. El diseño responsivo está aquí para quedarse y el uso responsable y sostenible de las consultas de los medios es el rey..
Algo que debes evitar es lo que podrías llamar consulta espaguetis-un enredo de consultas de medios que rápidamente se vuelve difícil de mantener. Mantener las consultas de los medios de comunicación manejables es de importancia crucial. Esta combinación no es un antídoto perfecto, pero definitivamente fomenta un enfoque DRY para tratar las consultas de los medios de forma sensata, especialmente cuando se combina con el nuevo punto de ruptura función. Como te oigo preguntar?
Puede escribir bloques de consulta de medios que pueden tomar contextos de cuadrícula. Digamos que tiene dos elementos que agregan hasta 12 columnas, como se define en $ total-columnas dentro de tu _grid-settings expediente. Estos elementos abarcan 3 y 9 columnas respectivamente en pantallas de tamaño de escritorio, que permiten contenedores externos de 1088 píxeles de ancho. Para dispositivos más pequeños o tamaños de vista, permita que medios de comunicación [consulta] mixin saber en qué tamaño debe cambiar el contexto de 12 columnas a otro número y ajustar el tamaño para los elementos de respuesta dentro de ese nuevo contexto en consecuencia. Auge!
Haml:
html .container% aparte 3 col / 1 col% artículo 9 col / 2 col
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + contenedor exterior color de fondo: # f5f5f5
Aparte, relleno de artículos: 10 px de margen inferior: 20 px de altura: 100 px
aparte + columnas-span (3) color de fondo: # 81d4fa + medios (ancho máximo 700px, 4) + columnas-span (1)
artículo + columnas de separación (9) color de fondo: # e64a19 + medios (ancho máximo 700 px, 4) + columnas de separación (2) "
Aquí, proporcioné el medios de comunicación mixin con una función de medios a través de ancho máximo de 700 px y un nuevo contexto de cuadrícula de 4 columnas para el $ total-columnas anchura máxima del elemento. Habiendo establecido un nuevo contexto de cuadrícula tanto para el aparte y artículo Elementos para el tamaño de la ventana gráfica. 700px máx, solo necesitaba indicar a los elementos cuántas columnas ahora pueden abarcar dentro del nuevo total de 4 columnas Personalmente, creo que esto es bastante fácil de leer y fácil de organizar. Se vuelve aún más fresco una vez que se reutiliza contextos de medios (consulta de medios / contexto de cuadrícula) a través de nuevo punto de ruptura Función y guardarlos en una variable Sass..
Nota: Si proporciona esta mezcla solo con un valor de píxel, sin ninguna función multimedia específica:
Hablar con descaro a:
css .some-responsive-element + span-columns (8) + media (700px) + span-column (4)
entonces Neat usará $ característica por defecto cual es ancho mínimo. Además, proporcionar un contexto de cuadrícula es opcional y por defecto lo que se establece a través de $ total-columnas en tus _grid-settings parcial.
Probablemente se esté preguntando qué pasa con el enfoque DRY. Mencioné un par de párrafos antes, ¿verdad? Ese es el espíritu!
Esta práctica función Sass personalizada es el Robin para tu medios de comunicación Batman, evitando que te repitas una y otra vez. Si quieres que tus consultas de los medios sean mucho más legibles y reutilizables, no veo una buena razón por la que no utilizarías a este compañero para luchar contra los delitos de consulta de los medios..
Basta ya de la analogía de Batman. En pocas palabras, todo lo que hace esta función es guardar contextos de medios (consulta de medios / contexto de cuadrícula) a través de variables y darle la oportunidad de reutilizarlos en todos sus medios de comunicación mixins ¡Eso es una extracción útil! Vamos a ver.
Hablar con descaro a:
"css $ tablet: nuevo punto de interrupción (ancho mínimo 768 px ancho máximo 1024 px 4)
.some-responsive-element + span-columns (3) + media ($ tablet) + span-columns (1)
.otro-otro-elemento-sensible + columnas-span (9) + medios ($ tablet) + columnas-span (2) "
Súper legible! Para estar más seguros de que estamos en la misma página: aquí proporciona todas las funciones de medios que necesita (pero sin comas, dos puntos)., o, y) más el número de columnas para el nuevo contexto de la cuadrícula, luego guárdelo en una variable Sass. Todo lo que queda por hacer es alimentar a su medios de comunicación mixins con la variable apropiada, y DRY son.
Espero que aprecie lo limpio que es esto y lo fácil que es modificar sus diseños para varios puntos de interrupción, todo en un lugar central. Se acabaron los días en que la gestión de toneladas de consultas de medios relacionadas con el diseño podría llevarlo rápidamente a una lucha de fantasía con su antiguo yo.
Me gustaría tomar un poco de tiempo extra para explorar este. Si no estás utilizando tablas muy a menudo en tus diseños (como probablemente no deberías, ya que nos despedimos de los días de usar tablas para despedirte), puede ser difícil saltar a este en este momento..
Tienes dos opciones principales para usar esta mezcla: con el argumento mesa o sin cualquier argumento.
Hablar con descaro a:
css .some-row-element + row
Cuando usas fila sin el mesa argumento, un clearfix se agrega y $ pantalla se mantiene en el valor predeterminado, que es bloquear. Efectivamente, eso significa que todo lo que venga después del elemento designado usando fila necesita comenzar su propia cosa en una "fila" separada.
Hablar con descaro a:
css .some-table-row-element + row (tabla)
Por otro lado, utilizando fila (tabla), lo has adivinado, hace que esta fila sea parte de un diseño de tabla. Lo que sucede debajo del capó, entre otras cosas, es que este mixin se establece pantalla: mesa y diseño de la mesa: fijo.
Hay una opción más con la que puedes proporcionar esta mezcla. Puede pasar un argumento ($ direccion con LTR o RTL) que cambia la dirección de su diseño para esa fila en particular.
Hablar con descaro a:
css .some-row-element + row ($ direction: RTL)
Pero empecemos por el principio. El siguiente ejemplo ficticio tiene 16. .fila contenedor que utiliza el fila mezclar A ver qué pasa si dejas fuera la mesa argumento.
Haml:
"html .container
.fila% img% img% img% img
% img% img% img% img
% img% img% img% img
% img% img% img% img "
Hablar con descaro a:
"css .container + external-container background-color: # f5f5f5
.fila + fila
img + span-columns (1) altura: 60px margen inferior: 5px fondo-color: # e64a19 "
Como puedes ver, el navegador trata los primeros cuatro .fila los contenedores no están vinculados a una fila en particular y simplemente flotan hacia abajo siempre que tengan espacio disponible para ellos.
Dos .fila Los contenedores resultan en el mismo truco, apilados uno encima del otro..
Haml:
"html .container
.fila% img% img% img% img
.fila% img% img% img% img
% img% img% img% img
% img% img% img% img "
No es demasiado complicado, supongo. Aunque no estoy seguro de cuán útil sería esto, porque instintivamente prefiero usar el omega Mixin para tal ocasión. Lo que parece bastante inútil, sin embargo, es usarlo. fila (tabla) aquí. Solo obtendrías una columna muy larga que apila los 16 elementos uno encima del otro. Te ahorraré la captura de pantalla desagradable pero echa un vistazo al ejemplo de codepen si sientes curiosidad.
Hasta ahora te he mostrado los mecanismos básicos de esta mezcla, especialmente si eres nuevo en el juego. Ahora nos acercamos al territorio útil. Vamos a jugar con una mesa real..
Si no te has engañado con las tablas anteriormente, te recomiendo encender Google antes de continuar. A continuación hay una pequeña guía de supervivencia para aquellos que necesitan actualizar un par de términos..
Aquí tenemos un mesa elemento. Comprende una thead etiqueta, que tiene una fila para mostrar los distintos encabezados de columna a través de th etiquetas Debajo encontrarás el tbody que alberga los datos reales para cada fila de la tabla (tr) mediante el td etiquetas.
Haml:
"html .container
%mesa
% thead% tr% th Nombre de usuario% th User_ID% th Pizza favorita% th Mascota% th Nombre de la mascota% th Juego favorito% tbody% tr% td Joe% td 112233% td Pepperoni% td Cat% td Gordon% td Splinter Cell% tr % td Jane% td 223311% td Setas% td Dog% td Fluffy% td Metal Gear Solid V% tr% td Bob% td 331122% td Cebollas% td Fish% td Sharky% td Little Big Planet 2 "
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + exterior-contenedor fondo-color: oscurecer (# f5f5f5, 50%)
tr + row () text-align: center
Acolchado th: superior: 10 px inferior: 20 px
td height: 50px fondo: # 81d4fa padding-top: 2px "Esto produce un blob de tabla irregular y desagradable, que solo se extiende hasta el contenido de estas celdas de datos de la tabla. Obviamente no es muy útil y es un dolor si lo desea manualmente. arregla esto usando un montón de reglas CSS para ordenar las cosas.
Debe haber una solución simple a este derecho? Añadiendo mesa como argumento y pantalla: mesa y diseño de la mesa: fijo ¡ven al rescate! Sin mencionar un poco de topping de llenar los padres bajo el capó.
Hablar con descaro a:
css tr + row (table) text-align: center
Nota: Un diseño de tabla fijo como este tiene la ventaja de no solo diseñar la tabla más rápido, sino que el ancho de las columnas no depende del contenido de las celdas de la tabla. Obtendrá filas distribuidas uniformemente que abarcan el ancho del contenedor de la tabla. Eliminar una celda de datos de la tabla (td) y verá que los otros elementos dividen el espacio en esa fila de manera uniforme:
Vamos a cerrar con un ejemplo que muestra el comportamiento predeterminado de las tablas sin utilizando la fila mixin en absoluto.
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + exterior-contenedor fondo-color: oscurecer (# f5f5f5, 50%)
tr text-align: center
Acolchado th: superior: 10 px inferior: 20 px
altura td: fondo 50px: # 81d4fa padding-top: 2px "
Como puede ver, las celdas están espaciadas uniformemente pero no usan todo el espacio apropiado que está disponible para ellas. Se orientan al contenido más largo por columna y ajustan sus celdas para alinearse a lo largo de estas líneas..
Disculpas por ser demasiado verboso sobre fila Pero espero que esta sección haya hecho que cualquier dolor de cabeza que pueda tener con las tablas y filas sea un poco menos indoloro..
Continuando, Neat ofrece una solución fácil si desea que un elemento llene rápidamente su elemento principal al abarcar el mismo número de columnas. No tienes que proporcionar ningún argumento. Esta combinación no es nada sofisticada, pero puede ser útil cuando se trata de consultas de medios o tablas..
Nota: Utilizando columnas de separación (12) en lugar de llenar los padres para abarcar todo el ancho de un contenedor externo no sería el enfoque correcto, simplemente agregaría equipaje innecesario.
Haml:
html .container% a un lado Aparte 3 columnas | artículo de relleno-padre% artículo 5 columnas | llenar los padres
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + exterior-contenedor margin-top: 10px background-color: # f5f5f5
Aparte, el margen del artículo es inferior: 5px de altura: 200px
aparte + columnas-span (3) + color de fondo de relleno-padre: # 81d4fa
article + span-columns (5) + fill-parent background-color: # e64a19 "
Tenga en cuenta que los elementos que utilizan llenar los padres ignore otros elementos en la misma fila, y trate de abarcar todo el ancho de sus padres sin considerar a sus vecinos. Supongo que este es bastante sencillo, sigamos adelante!
Cada elemento de tu cuadrícula Neat tiene una $ default-layout-direction que se establece en LTR (de izquierda a derecha) en configuraciones / _grid.scss. Esto significa que detrás de escena Neat siempre está usando un dirección-contexto con de izquierda a derecha.
Bajo el capó, esta mezcla no hace nada más que cambiar la dirección de flotación del elemento aplicado. Qué es limpio es que dentro de un contexto direccional, digamos de izquierda a derecha, puedes reunir un montón de elementos de cuadrícula y cambiar su dirección a De derecha a izquierda-todos a la vez, bajo un bloque de código. Una vez más, esta solución hace que las cosas sean más compactas y legibles para ti, así como más fáciles de entender para alguien que no está familiarizado con un determinado proyecto..
Haml:
html .container% aparte 3 columnas% artículo 9 columnas
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + exterior-contenedor margin-top: 10px background-color: # f5f5f5
Aparte, el margen del artículo es inferior: 5px de altura: 200px
+dirección-contexto (de derecha a izquierda) a un lado + span-columnas (3) color de fondo: # 81d4fa
artículo + columnas de separación (9) color de fondo: # e64a19 "
Aquí está la misma demostración. sin dirección-contexto:
Aquí hay otro ejemplo. Nada nuevo por ahora, es solo que las columnas son del mismo tamaño y también fluyen desde De derecha a izquierda.
Haml:
html .container% aparte 3 columnas% artículo 3 columnas
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + exterior-contenedor margin-top: 10px background-color: # f5f5f5
Aparte, el margen del artículo es inferior: 5px de altura: 200px
+dirección-contexto (de derecha a izquierda) a un lado + span-columnas (3) color de fondo: # 81d4fa
artículo + columnas de separación (3) color de fondo: # e64a19 "
El siguiente pequeño pellizco tiene solo uno de estos tres elementos de la columna que usa la mezcla, y por lo tanto, flotan hacia los lados opuestos del contenedor. Nada demasiado mágico, pero podría ser útil tenerlo en tu bolsa de trucos..
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + exterior-contenedor margin-top: 10px background-color: # f5f5f5
Aparte, el margen del artículo es inferior: 5px de altura: 200px
aparte + columnas-span (3) color de fondo: # 81d4fa
+Artículo de dirección-contexto (de derecha a izquierda) + columnas-span (3) color de fondo: # e64a19 "
Esta última sección del tutorial cubre un par de mixins que quería mencionar para completar, pero que personalmente trato de evitar ya que no siempre me han dado los resultados que esperaba. Si tiene una mejor experiencia al usarlos, hágamelo saber. Además de eso, tres de ellos pronto serán desaprobados:
Accentsconagua
pantalla de reinicioreinicio-diseño-direcciónresetear todoNo hay mucho que decir sobre esto. Imagine que ha cambiado la dirección del diseño por cualquier motivo y desea volver a la $ default-layout-direction (de izquierda a derecha)? ¡Aquí tienes, se restaura el contexto por defecto! No se necesita argumento.
Hablar con descaro a:
"css .row + row ($ direction: RTL)
.fila reinicio-diseño-dirección "
¿Cuándo podría ser útil esto? ¡Buena pregunta! La documentación dice principalmente cuando necesita cambiar de dirección en una sola fila. Yo personalmente no me molestaría demasiado. En primer lugar está programado para ser desaprobado en favor de un dirección Mixin, y también me dio un sorprendente dolor de cabeza cuando quería que funcionara con consultas de medios..
Para crear un bloque de código que cambia las propiedades de visualización utilizadas por los mixins dentro de sí mismo, tiene dos opciones que puede pasar a esta mezcla: bloquear y mesa. El primero es obvio y mesa añade pantalla: tabla-celda para ti. mesa-celda obliga a un elemento a comportarse como un td elemento.
Hablar con descaro a:
css + display-context (table) .some-cell + span-columns (2)
Digamos que ha cambiado la pantalla activa a mesa como en el ejemplo anterior, pantalla de reinicio te ayuda a volver fácilmente a bloquear. No lleva ningún argumento tampoco. La documentación dice que es más útil si se aplica a filas individuales que han cambiado sus valores de visualización.
Hablar con descaro a:
"css .row + fila (tabla)
.fila + reinicio-pantalla "
Si quieres combinar pantalla de reinicio y reinicio-diseño-dirección de una vez, eso es lo que obtendrás resetear todo-No se requieren argumentos. Digamos que en alguna fila cambió la pantalla a mesa y el $ default-layout-direction a RTL y quiero volver atrás.
Hablar con descaro a:
"css .row + row (tabla, RTL)
.fila + reiniciar todo "
Bueno, esa fue una larga. Gracias por hacerlo, y espero que haya encontrado un viaje interesante en el territorio de Neat mixin. Hay una cosa más para discutir sin embargo; es decir, todas las variables que tiene a su disposición para modificar el marco para sus necesidades. El siguiente tutorial es más corto, pero concluye nuestra cobertura de Neat. Te veo allí!
