Sass Mixins: Mantenga sus hojas de estilo SECAS

Uno de mis beneficios favoritos de usar Sass es que hace que la automatización del flujo de trabajo de diseño front-end sea muy sencilla. Hay muchas herramientas de JavaScript para trabajar con archivos y automatizar otras tareas, pero las capacidades de combinación integradas de Sass permiten escribir código de estilo de front-end modular. En este artículo, he enumerado diez de mis Sass mixins favoritos para automatizar la escritura de estilos web.

Estos son los mixins de Sass que uso para casi todos los proyectos web en los que trabajo. Hay muchos artículos interesantes con algunos mixins útiles de Sass en toda la web. También hay algunas buenas bibliotecas de mezclas Sass que son excelentes para tareas más pequeñas, como Bourbon. Otra gran biblioteca de mixins de la que he derivado algunos de los mixins a continuación es Andy.

Los mixins que repasaré en este artículo tratan de lo siguiente:

• Preguntas de los medios
• Temas de color
• Elementos de centrado
• Clearfix
• Tamaños de fuente consistentes
• Transiciones de animación
• imágenes retina
• Gradientes rápidos
• Fuentes externas
• Relleno/márgenes rápidos

Preguntas de los medios

Las consultas de medios le permiten agregar fácilmente puntos de ruptura personalizados a sus hojas de estilo y agregar rápidamente un comportamiento de respuesta personalizado dentro de un elemento para diferentes puntos de ruptura. Sin embargo, las consultas de medios de hojas de estilo pueden convertirse rápidamente en una causa de dolores de cabeza, especialmente cuando se trata de mantenerlas en el futuro. Con Sass mixins, todo eso puede cambiar.

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

Con estos definidos, los mixins se pueden usar de la siguiente manera:

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

Funciona muy bien de forma independiente o con otros marcos de cuadrícula como Bootstrap.

La declaración if emitirá una consulta de medios ajustada a un tamaño de pantalla particular dependiendo del nombre de tamaño proporcionado al mixin. Esto le permitirá ajustar fácilmente el comportamiento de sus atributos CSS en consecuencia. También puedes personalizar el punto en el que quieres ajustar tus atributos CSS. Por lo general, los diseños más receptivos se mantendrán con 3 o 4 dimensiones de ancho de pantalla definidas para ajustar el contenido. La variedad de tamaños de pantalla, dispositivos y aplicaciones siempre se está expandiendo, pero existe una tendencia popular que muchos desarrolladores web usarán para sus diseños; tamaños de pantalla pequeños para teléfonos, medianos para tabletas, grandes para computadoras portátiles y extra grandes para computadoras de escritorio.

Como referencia, los puntos de medios utilizados en Bootstrap v3 son:

• max-width: 767px (cualquier pantalla de hasta 767px de ancho)
• min-width: 768px (cualquier pantalla de más de 768px de ancho)
• min-width: 992px (cualquier pantalla de más de 992px de ancho)
• min-width: 1200px (cualquier pantalla de más de 1200px de ancho)

Temas de color

Definir un tema de color para usar en todo su sitio ayuda a ahorrar tiempo al tener las mismas partes coloreadas de CSS en los mismos elementos HTML. Si desea que todos sus botones div tengan un borde punteado sólido de 1 px, puede agregarlo fácilmente a su tema. Esta combinación de Sass le permitirá establecer tantas variables de color como desee y afectar a tantas clases como desee. Esta puede ser una herramienta útil para proporcionar opciones de color para algo, o cada vez que tenga una función que afecte el color de muchos elementos a la vez. Hay un excelente artículo aquí con más información sobre cómo trabajar con temas de color en Sass.

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

Una vez que configure un tema de color en profundidad, eliminará el 70% de su estilo relacionado con el color si se hace correctamente. También recomendaría separar este archivo .scss de sus otros archivos .scss e incluir todas las variables de color de su marca en el mismo archivo.

Una línea tan simple como:

 @include theme(theme-banana, yellow);

emitirá:

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

Elementos de centrado

Dependiendo de su diseño, hay muchas formas diferentes de alinear al centro un elemento en sus estilos. El siguiente método utiliza posicionamiento absoluto y le permitirá definir elementos centrados verticales, horizontales o ambos. El elemento principal deberá tener una posición: relativa. Esto le permite definir fácilmente la posición centrada de un elemento en solo 2 líneas de código.

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

 .foo { @include center(both); } .foo-parent { position: relative; }

Esta combinación es una de las formas más versátiles de centrar el contenido, pero vale la pena señalar que hay muchas formas diferentes de centrar el contenido, y es posible que esta no siempre sea la mejor solución. Dependiendo de su estilo de diseño y compatibilidad con el navegador, es posible que desee centrar su contenido de una manera diferente. Flexbox es otra herramienta popular y muy útil para la alineación, aunque en este momento no es totalmente compatible con los navegadores antiguos. La alineación simple de texto y contenedor se puede hacer fácilmente sin esta combinación, usando propiedades CSS simples. Este lo ayudará más al crear diseños y trabajar con contenedores dentro de otros contenedores.

Clearfix

Aplique la propiedad clearfix css de forma rápida y eficaz a los elementos. Hay muchas soluciones clearfix en la web, y esta parece funcionar mejor. También es fácil de usar una vez que se crea el mixin de Sass.

Este mixin se beneficiará siempre que tenga contenido flotando a la derecha o a la izquierda, y desee borrar el espacio debajo del elemento flotante para insertar contenido nuevo a continuación.

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }

 .container-with-floated-children { @extend %clearfix; }

Tamaños de fuente consistentes

Establezca un tamaño de fuente rem en su documento, para usar en todos sus elementos de texto. Esta es una mejor manera de aumentar y reducir las fuentes en lugar de em. El uso de em se combinará en función de los otros atributos CSS, pero rem solo se ampliará hacia arriba o hacia abajo según el tamaño que defina en su documento HTML. Separar un archivo .scss para toda su tipografía y usar la combinación a continuación para definir sus tamaños de fuente predeterminados automatizará drásticamente su flujo de trabajo de codificación de tipografía.

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }

 p { @include font-size(14px) }

Esta combinación también crea una reserva de píxeles para los navegadores que no admiten rem (IE8 y versiones anteriores). Cuando el navegador no admite el tamaño de rem, el mixin calculará el equivalente en píxeles del tamaño de rem inicial que configuró y generará valores de píxel y rem para un elemento.

Animación

Defina rápidamente propiedades de animación y agréguelas a sus elementos. Actualmente, la propiedad CSS de animación aún necesita prefijos de proveedores, por lo que esto también lo agregará a la mezcla.

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

La primera parte del mixin agregará los prefijos de proveedores adecuados necesarios para la compatibilidad del navegador. La siguiente sección lo configura para ingresar sus cadenas y propiedades personalizadas. La sección final de la mezcla es donde crearía su nombre de mezcla (en este caso: desvanecimiento) y definiría lo que le gustaría que sucediera en cada fotograma clave de la animación. Esta configuración de ejemplo es muy básica y puede agregar cambios a cualquier porcentaje de la duración de la animación.

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

El ejemplo aquí tomará el elemento de destino al 0 % de la animación (comienzo) y hará la transición de la propiedad de opacidad total (opacidad: 1;) a no tener opacidad y esencialmente desaparecer (opacidad: 0;) al 90 % de la animación. . Entonces, si configuro la animación para que tenga una línea de tiempo de 5 segundos, el elemento desaparecerá después de 4,5 segundos (90% de la animación de 5 segundos). La última propiedad que defino en el uso del mixin (el “3”) es el número de veces que se repetirá la animación.

Imágenes de retina

Agregue imágenes de alta resolución a su sitio, con una alternativa para los dispositivos que no muestran imágenes de alta resolución. Cuando use imágenes de retina, recomendaría comprimir tanto como sea posible sin destruir la imagen. Una buena herramienta para esto es TinyPNG (soporta PNG y JPG).

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

Esta combinación le permitirá agregar una regla en el mismo lugar que la propiedad CSS que define la imagen original.

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

Anteriormente, la única solución de CSS para esto era usar consultas de medios, y esta solución es mucho más limpia y sencilla. Para obtener más pensamientos e ideas sobre este mixin, consulte este artículo.

Gradientes rápidos

Agregue degradados fácilmente definiendo solo el color inicial, el color final y el tipo de degradado. Agregue todas las propiedades de degradado y puede elegir según sea necesario. El tipo de degradado le permite elegir entre un degradado vertical, un degradado horizontal o un degradado radial (en forma de esfera).

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

Ya no tendrá que recordar los distintos prefijos de proveedores y órdenes de parámetros para implementar gradientes.

 .foo { @include background-gradient(red, black, 'vertical'); }

Fuentes externas

Usando la propiedad font-face de CSS, podemos agregar fácilmente fuentes en un directorio e incluir todos los tipos de fuentes. Al usar archivos de fuentes, los diferentes navegadores tienen diferente compatibilidad con los tipos de archivos. Este mixin ayuda a resolver eso al usar cualquier archivo de fuente relevante en un directorio.

Simplemente incluya cualquier archivo de fuente en un directorio y agregue la etiqueta "@include" en sus estilos, que tomará todos los archivos de la carpeta elegida.

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

Este mixin se encargará de definir las URL de formato de fuente alternativo, incluidas las extrañas soluciones necesarias para la compatibilidad con versiones anteriores.

Relleno rápido y márgenes

La razón principal por la que uso esto es porque omitiré una propiedad de relleno específica, como padding-left a veces, y no quiero definirla. Usando la propiedad nula de Sass, puede omitir las propiedades de relleno. Las mismas reglas se aplican a los márgenes.

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

La mezcla se puede usar para reemplazar un montón de propiedades padding-* y margin-* en sus hojas de estilo. Puede incluir rápidamente esta combinación en cualquier elemento y definir solo los lados del relleno/márgenes que desea incluir. El relleno y los márgenes son uno de los estilos CSS más utilizados que se agregan a los elementos, y un pequeño ahorro de tiempo como este se acumulará rápidamente.

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

Envolver

El uso de mixins de Sass como los que se describen en este artículo es una excelente manera de hacer que su flujo de trabajo sea más eficiente. Estos mixins específicos lo ayudarán a dedicar menos tiempo a tareas web comunes, lo que le dará más tiempo para concentrarse en otros aspectos del proyecto que requieren una visión más cuidadosa y experta.

La instalación y el trabajo con Sass se pueden hacer de varias maneras, e implicará usar el símbolo del sistema para instalar algunas bibliotecas en su proyecto. Una forma de instalar Sass es usar Ruby, como se describe en el sitio web principal de Sass aquí, y otra forma popular es usar Node.js.

Los beneficios de Sass se extienden más allá de la automatización y pueden ayudarlo a crear y administrar fácilmente las hojas de estilo de su proyecto. Incluso algunos de los proyectos web más básicos pueden tener miles de líneas de código CSS. Sass es una excelente manera de dividir este código en partes más manejables, cada una con su propio enfoque.