One for the Road Mixins Borbones Más Sabrosos

Este artículo es la segunda parte de mi exploración en mixins de la biblioteca Bourbon Sass. Entre ellos encontrará ejemplos útiles que acelerarán su flujo de trabajo y minimizarán su código Sass.

Otra lista de golosinas

Estaremos probando los siguientes ocho mixins:

• Mezcla de bloques en linea
• Posición de mezcla
• Mezcla de triángulos
• Mezcla Clearfix
• Botón de mezcla
• Tamaño mixin
• Mezcla de consulta de medios HiDPI
• Retina imagen mixin

Al igual que en el tutorial anterior, los ejemplos a continuación no representan necesariamente las mejores prácticas de diseño, sino que se eligen para explorar la funcionalidad básica de estas combinaciones..

Mezcla de bloques en línea

Los párrafos, por defecto, se muestran como bloquear elementos.

HTML:

"html

Bla bla bla

Bla bla bla

"

Los elementos de nivel de bloque, como los párrafos, crean automáticamente una nueva fila en el diseño.

Este mixin es útil si quieres cambiar el comportamiento de visualización predeterminado de elementos para bloque en linea. No solo establece display: inline-block pero también se encarga de las peculiaridades y el soporte heredado de IE7.

Aprenda más sobre la visualización en designshack.net.

Sass: estos bloques tienen un comportamiento flotante, a través del bloque en línea.

"css .paragraphs-behave-like-blocks + inline-block background-color: tomate

// Sintaxis de SCSS // .paragraphs-behave-like-blocks @include inline-block; // "

Echa un vistazo a la salida CSS generada. ¿Quién quiere manejar cosas desagradables como esas de todos modos??

Salida CSS:

css .paragraphs-behave-like-blocks display: inline-block; alineación vertical: línea de base; zoom: 1; * pantalla: en línea; * vertical-align: auto; color de fondo: tomate;

Ajustado a display: inline-block, los párrafos se muestran en línea, pero conservan sus características de nivel de bloque.

Atención! Observe el espacio en blanco entre los elementos de bloque. Si estabas usando flotador para lograr el mismo diseño, no verías ningún espacio en blanco. Es un tipo de espacio en blanco predeterminado, presente en el HTML, que no desaparece al establecer los márgenes en 0px. En su lugar, debe eliminar cualquier espacio en blanco en el marcado, como se muestra en este lápiz:

Posición Mixin

Esta mezcla es una abreviatura para escribir algo como lo siguiente:

Hablar con descaro a:

css .some-element position: relativo superior: 0px a la izquierda: 100px

Hablar con descaro a:

"css .some-element + position (relativo, 0px 0 0 100px) // arriba a la derecha abajo a la izquierda

// Sintaxis de SCSS .some-element // @include position (relativo, 0px 0 0 100px); "

Eso es. No hay magia, pero sigue siendo super útil. Mantener las hojas de estilo simples y legibles se amortiza con el tiempo.

Mezcla de triángulo

¿Quieres usar triángulos CSS sin juguetear? Ciertamente no hay necesidad de usar imágenes para el trabajo. Es fácil como pastel con esta mezcla..

Hablar con descaro a:

"css. triángulo + triángulo (25px, tomate, abajo) // tamaño, color, dirección

// Sintaxis de SCSS .triangle @include triangle (25px, tomato, down); // "

El tercer parámetro define la dirección. Las opciones para esta mezcla incluyen:

• abajo
• arriba
• izquierda

• Correcto

• vertical
• arriba a la izquierda
• completamente
• abajo a la izquierda

Incluso puede definir un segundo color si necesita un color de fondo para su triángulo.

Clearfix Mixin

Los contenedores que tienen elementos flotantes dentro de ellos experimentan el problema del contenedor de altura cero: en esencia, el elemento contenedor se desinfla a cero píxeles si todos sus elementos internos flotan y se retiran del contenedor. fluir. Esencialmente, no queda nada para llenar el contenedor..

los clearfix Mixin se encarga de esto cuando se aplica al elemento contenedor / envoltorio. Lo mejor de esto es que no requiere un marcado adicional "vacío" para acomodar el clearfix. Mantiene las cosas semánticas, separando las preocupaciones, simplemente agregando el clearfix en sus hojas de estilo. Echa un vistazo a este ejemplo muy simple:

HTML:

"html

"Sass:" css $ gris claro: # D4D4D4 .grey-wrapper background-color: $ light-gray + clearfix .logos float: right + background-image (url ("[email protected]"), url ("thoughtbot.png")) background-position: parte superior central, parte superior izquierda background-repeat: repetir-y, repetir-x altura: 220px ancho: 50% // sintaxis SCSS // .grey-wrapper @include clearfix; color de fondo: $ gris claro; .logos float: right; @include background-image (url ("[email protected]"), url ("thoughtbot.png")); posición de fondo: centro arriba, arriba a la izquierda; repetición de fondo: repetir-y, repetir -x; altura: 220px; ancho: 50%; // "! [archivo] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633234957.jpg) En el ejemplo anterior, el contenedor gris se expande para contener el sin embargo, cuando no se usa clearfix:! [archivo] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633341703.jpg) Si toma Un vistazo al código fuente queda claro cómo funciona este * micro clearfix *: Sass: [Código fuente Bourbon] (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix .scss) "css @mixin clearfix &: after content:" "; pantalla: tabla; Limpia los dos; "Esta mezcla usa el :después pseudoelemento para colocar una cadena vacía al final del contenedor. Al hacerlo, imita el contenido después del logotipo y engaña al navegador para que expanda el contenedor gris para rodear otros elementos del interior. ## Botón Mixin ¿Necesita botones de alta calidad fuera de la caja? ### Botón estándar! [Archivo] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633769651.png) HTML: "html Super duper button" Sass: "css $ light-blue: # 2485F1 .super-duper-button + button ($ light-blue) // Sintaxis de SCSS // .super-duper-button @include button ($ light-blue); // "Eso es todo ! Botones sencillos y semánticamente limpios. Incluso vienen con grandes efectos de desplazamiento sutiles. Y hay dos opciones más: ### Pill Button! [File] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633844440.png) HTML: "html Super botón de la píldora duper "css $ dark-pink: # 6B32D1 .super-duper-button + button (píldora, $ dark-pink) // sintaxis SCSS // .super-duper-button @include button (píldora, $ dark- rosado); // "### Shiny Button! [Archivo] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633895872.png) HTML:" html Super duper shiny button "Sass:" css $ aceptación-verde: # 43C914 .super-duper-button + button (brillante, $ aceptación-verde) // Sintaxis SCSS // .super-duper-button @include button (brillante, $ aceptación- verde); // "** ¡Atención! ** Tenga en cuenta que el texto de los botones cambia automáticamente de color dependiendo de la * luminosidad * del color base del botón. De esta manera, la mezcla proporciona un mejor contraste y legibilidad. ¡Impresionante! [archivo] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441634000114.png) Sass: "css $ light-gray: #DEDEDE .super-duper-button + botón (brillante, $ gris claro) // Sintaxis de SCSS // .super-duper-button @include button (brillante, $ gris claro); // "## Tamaño Mixin ¿Alguna vez necesita definir anchura y altura en una declaracion? Con Bourbon, aquí tiene todo lo que necesita hacer: Sass: "css .small-article + size (300, 400) // Sintaxis de SCSS // .small-article @include size (300, 400); //" CSS salida: "css .small-article width: 300px; height: 400px;" Puede proporcionar valores de píxeles o solo valores numéricos. Puedes usar auto para estos valores también. Si solo proporciona un tamaño, Bourbon asume que desea un cuadrado. Sass: "css .square + size (25px) // Sintaxis de SCSS // .square @include size (25px); //" ## HiDPI Mixin Si desea generar rápidamente consultas de medios con prefijo de proveedor para la detección * Dispositivos HiDPI * ("Retina"), esta combinación es muy útil. Comience por proporcionar una proporción de píxeles de dispositivo * objetivo * y declaraciones que cambien si se activa la consulta de medios. La proporción predeterminada es 1.3. Sass HiDPI-media-query: "css .image width: 150px + hidpi (1.5) width: 200px // Sintaxis de SCSS // .image width: 150px; + hidpi (1.5) width: 200px; //" Salida CSS: "css .image width: 150px; @media only screen y (-webkit-min-device-pixel-ratio: 1.5), only screen y (min - moz-device-pixel-ratio: 1.5), solo pantalla y (-o-min-dispositivo-pixel-ratio: 1.5 / 1), solo pantalla y (min-resolución: 144dpi), solo pantalla y (min-resolución: 1.5dppx) ancho: 200px; " ¡Muy genial! Adelgaza un poco el código repetitivo. ## Retina Image Mixin Dependiendo de la * densidad de píxeles * del dispositivo que muestra sus diseños, puede proporcionar imágenes con la resolución de mapa de bits adecuada. Esta excelente combinación proporciona una * imagen de fondo de la retina * o una * imagen de fondo no de la retina * -dependiente del resultado de la consulta de medios de HiDPI interna de la mezcla que verifica el dispositivo para determinar su densidad de píxeles. Si no me equivoco, como beneficio adicional, solo servirá una de las imágenes para evitar la descarga de ambas, lo que es especialmente ventajoso para las redes celulares. Si todo lo anterior es para usted, le recomiendo comenzar con este [artículo] fantástico (http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/) en la revista Smashing. Sass: "css .logo + retina-image (logo-icon, 50px, 30px) // Sintaxis de SCSS // .logo @include retina-image (logo-icon, 50px, 30px); //" La salida de CSS ayuda a explicar su funcionalidad: "css .logo background-image: url (logo-icon.png); @media only screen y (-webkit-min-device-pixel-ratio: 1.3), only screen and (min- -moz-dispositivo-píxel-relación: 1.3), solo pantalla y (-o-min-dispositivo-píxel-relación: 1.3 / 1), solo pantalla y (resolución mínima: 125 ppp), solo pantalla y (resolución mínima : 1.3dppx) .logo background-image: url (logo-icon_2x.png); background-size: 50px 30px; "El valor predeterminado de una proporción de píxeles del dispositivo de 1.3 dispositivos Apple" Retina "(que tienen una proporción de 2), así como dispositivos con una proporción de píxeles tan "baja" como 1.3. Esta mezcla espera un **. Png ** como la extensión estándar para todas las imágenes. Por defecto, también espera una extensión ** _ 2x.png ** para el nombre de archivo de su imagen de retina. Puede sobrescribir ambos valores predeterminados proporcionando otro nombre de archivo de retina y una extensión estándar, como: Sass: "css .logo + retina-image (logo-icon, 50px, 30px, $ extension: jpg, $ retina-filename: HiDPI- logo-icon, $ retina-suffix: _retina) // Sintaxis de SCSS // .logo @include retina-image (logo-icon, 50px, 30px, $ extension: jpg, $ retina-filename: HiDPI-logo-icon, $ retina-suffix: _retina); // "CSS output:" css .logo background-image: url (logo-icon.jpg); @media only screen y (-webkit-min-device-pixel-ratio : 1.3), solo pantalla y (min - moz-dispositivo-pixel-ratio: 1.3), solo pantalla y (-o-min-device-pixel-ratio: 1.3 / 1), solo pantalla y (min-resolución: 125dpi), solo pantalla y (resolución mínima: 1.3dppx) .logo background-image: url (HiDPI-logo-icon_retina.jpg); background-size: 50px 30px; "## ¡Salud! Eso es todo lo que cubriremos en términos de mixins Bourbon. En el siguiente tutorial vamos a echar un vistazo a las funciones de Bourbon.