Share
Sass está diseñado para ayudar a escribir CSS más rápido; Los mixins son de las características que lo hacen posible. Existen varias bibliotecas de peso pesado con fórmulas complejas para cada situación, pero hoy voy a mostrar cómo agitar sus propios mixins que complementan los flujos de trabajo existentes.
Miniatura: mezcla de huevos a mano en PhotoDune.
Nota: Los archivos de documentos completos se pueden descargar con anticipación para ver lo que crearemos y tener una idea de cómo se ven los archivos Sass sin procesar..
He estado usando Sass en mi desarrollo de aplicaciones para usuario por más de un año, y los mixins fueron la característica en la que me conecté de inmediato. Vi una reducción instantánea en el tiempo que pasé escribiendo hojas de estilo, sin importar cuán grande o pequeño fuera el proyecto. Pero, ¿qué son los mixins? Desde el sitio web de Sass Language:
Los mixins son una de las características más potentes de Sass. Permiten la reutilización de estilos, propiedades o incluso selectores, sin tener que copiarlos y pegarlos o moverlos a una clase no semántica..
Dicho de otra manera, los mixins son generadores de código. Creas una mezcla en tu hoja de estilos Sass con el @mixin directiva, defina las reglas de CSS que debería generar y llámela cada vez que necesite esas reglas incluidas en una declaración de estilo. Utilizo los mixins exclusivamente para las características de CSS3 como sombras de cuadro, sombras de texto y radios de borde. Muchas de estas funciones no son totalmente compatibles y requieren un prefijo de proveedor como -webkit-, -moz-, -ms-, -o- para trabajar como se esperaba. En lugar de escribir cinco reglas cada vez que quiero usar una función CSS3, puedo llamar a un mixin de una línea y hacer que genere el CSS adecuado para mí.
Estos dos primeros pasos requieren que abramos la aplicación Terminal (Símbolo del sistema en Windows) para verificar el idioma de Ruby e instalar la gema Sass. Busque la Terminal en los siguientes lugares:
Una vez que tenga el terminal abierto, escriba el siguiente comando para verificar si hay una instalación de Ruby. No escriba el signo de dólar, es su marcador de posición.
$ qué rubí
Debería ver alguna información de ruta como / usr / local / bin o un mensaje de error si Ruby no está instalado. Aquí está la salida de mi terminal OS X:
Si recibe un error, o si sabe que Ruby no está instalado en su máquina, aquí hay algunos recursos para comenzar a trabajar con un mínimo esfuerzo. El proceso para instalar Ruby está fuera del alcance de este artículo y está bien documentado en los sitios a continuación..
Una vez que haya verificado o instalado el lenguaje Ruby, Sass es muy fácil. Desde la Terminal, ingrese este comando: $ gema instalar sass. Si su usuario no tiene los permisos correctos, es posible que deba ejecutar el comando con sudo (Super usuario hacer) Me gusta esto: $ sudo gema instalar sass. En unos segundos, debería ver una salida similar a la pantalla de abajo.
Mientras que no necesitar una aplicación de compilación como LiveReload, Compass o CodeKit para compilar Sass en CSS de vainilla, hace que el primer viaje alrededor del bloque sea mucho más suave. CodeKit es solo para OS X, LiveReload es principalmente para OS X, con una versión beta de Windows; La aplicación Compass funciona en OS X, Windows y Linux. Las licencias varían desde $ 10 USD a $ 25 USD en el momento de escribir este artículo, pero valen la pena por el tiempo ahorrado a medida que profundiza en el desarrollo de Sass.
Ahora sería un buen momento para mencionar que Sass viene en dos sabores., .hablar con descaro a y .scss. Sin entrar en detalles, me atengo a la sintaxis .scss porque se asemeja mucho a CSS de vainilla y se compila sin ningún problema.
Una vez que haya configurado su compilador, querrá configurar un directorio de trabajo con sus archivos HTML y CSS. Para este tutorial, he creado una muestra llamada Write Your Own Sass Mixins. A continuación se muestra la estructura a la que me referiré en todo el tutorial. Si aún no ha descargado los archivos de documentos, hágalo y agregue los archivos Museo Sans y Droid Serif a su directorio / fonts. Estas fuentes son necesarias para algunos de los mixins que crearemos más adelante en el tutorial..
Escriba su propio Sass Mixins index.html / css (directorio) / fonts (directorio) / scss (directorio) | - main.scss
Desde que opté por LiveReload, le diremos que observe los cambios que deben compilarse en CSS. Cuando inicies LiveReload, deberás recibir un saludo con la pantalla que se muestra a continuación. Arrastre su directorio de trabajo a la barra lateral de Carpetas supervisadas en la ventana LiveReload.
A continuación querrá comprobar el Compile SASS, LESS, Stylus, CoffeeScript y otros caja. Hacer clic Opciones para seleccionar su ruta de salida siguiente.
Debería ver una tabla en blanco con las rutas de salida resaltadas y scss / main.scss en la primera línea. Haga clic en el Establecer carpeta de salida ... botón aquí La carpeta CSS debería estar seleccionada por defecto. Haga clic en Establecer carpeta de salida y Aplicar.
Actualice su archivo index.html con este código y actualice su navegador. Su índice debe verse como la pantalla de abajo.
Escribe tu propio Sass Mixins Algun texto va aqui.
LiveReload ofrece extensiones de navegador para Firefox y Chrome, pero la forma más rápida de comenzar a trabajar es copiar el siguiente fragmento de código JavaScript (desde la ventana de LiveReload) en su archivo index.html, justo encima del cierre cuerpo etiqueta. Una vez que este fragmento esté en su lugar, LiveReload escuchará los cambios en sus archivos HTML y Sass, y actualizará automáticamente el navegador, no más Command + R cada pocos minutos..
Ahora que hemos terminado con la limpieza, podemos comenzar a crear mixins y dejar que nuestro compilador haga el trabajo duro..
Como se indicó anteriormente, utilizo muchas características de CSS3 en mis diseños de página. El problema con estas características de vanguardia es que requieren muchos prefijos de proveedores y no tengo mucha paciencia. Si puedo escribir una mezcla una vez, en lugar de cinco líneas de CSS muy duplicadas cada vez que quiero esquinas redondeadas, lo haré.
Los mixins se identifican en archivos Sass por el @mixin () declaración. Cada vez que un procesador como LiveReload llega a esta sintaxis, busca argumentos dentro de los paréntesis e instrucciones similares a CSS dentro de las llaves. El compilador interpretará esas instrucciones y generará CSS puro en su hoja de estilos, main.css en este caso.
Abra su archivo main.scss y copie el siguiente código de mezcla. Cuando haga clic en guardar, la ventana de su navegador con index.html se volverá a cargar automáticamente y tendrá un div gris centrado con esquinas redondeadas de 6px.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; radio-borde: $ topLeft $ topRight $ bottomRight $ bottomLeft; #wrapper @include border-radius (6px, 6px, 6px, 6px); ancho: 750px; altura: 250px; fondo: #eee; margen: 0 auto;
Así que hemos tenido un buen comienzo con nuestra primera mezcla. Pero la mezcla de radio de borde tiene un punto débil: si aplicamos un borde con una opacidad inferior al 100%, el fondo se mostrará. No es exactamente una gran elección de diseño en muchos casos.
Por suerte tenemos una solución fácil en la propiedad de clip de fondo. Si no está familiarizado, Chris Coyier, de CSS-Tricks, tiene una excelente reseña de la propiedad..
Los mixins de Sass también se pueden extender con otros mixins. Esto nos permite escribir el clip de fondo por separado y crear una tercera mezcla que lo llame y nuestras reglas de radio de borde del paso anterior. Agregue el siguiente código a su archivo main.scss y guárdelo. Después de actualizar su navegador, debería ver un fondo azul y un borde de radio azul más claro semitransparente.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; radio-borde: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin background-clip background-clip: padding-box; @mixin radio combinada ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include background-clip; @include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); cuerpo fondo: azul claro; #wrapper width: 750px; altura: 250px; fondo: #eee; margen: 0 auto; borde: 15px rgba sólido (255, 255, 255, 0.3); @include radio combinado (6px, 6px, 6px, 6px);
Aunque inicialmente duplicamos varias líneas, ahora tenemos una mezcla reutilizable que se puede llamar en cualquier momento al proporcionar los valores del radio del borde. Y se rendirá correctamente.
Las sombras de texto son una excelente manera de pinchar tratamientos y botones tipográficos. A menudo los uso para estados de navegación, pestañas o etiquetas seleccionados. También son uno de los elementos más molestos, porque IE9 no los admite, y no hay buenas soluciones CSS puras.
A pesar de este desafortunado hecho, estoy incluyendo el código mixin para los otros navegadores modernos y IE 10 beta. También me he encontrado con un script jQuery para la representación de la sombra de texto en IE9 o inferior.
Para los navegadores modernos, la propiedad text-shadow está estructurada de manera muy similar a la caja-sombra, con parámetros de desplazamiento, difuminado y color horizontales y verticales. Agregue el siguiente código a sus archivos main.scss e index.html, y debería ver una sombra borrosa de 3px detrás del texto azul.
/ * Main.scss * / @mixin text-shadow ($ horizOffset, $ vertOffset, $ blur, $ color) -webkit-text-shadow: $ horizOffset $ vertOffset $ blur $ color; -moz-text-shadow: $ horizOffset $ vertOffset $ blur $ color; -ms-text-shadow: $ horizOffset $ vertOffset $ blur $ color; / * IE 10+ * / -o-text-shadow: $ horizOffset $ vertOffset $ blur $ color; text-shadow: $ horizOffset $ vertOffset $ blur $ color; #wrapper, # wrapper-text-shadow width: 750px; altura: 250px; fondo: #eee; margen: 0 auto 20px; relleno: 15px 0 0 15px; borde: 15px rgba sólido (255, 255, 255, 0.3); @include radio combinado (6px, 6px, 6px, 6px); # wrapper-text-shadow> p font-size: 36px; color azul; @include text-shadow (0, 3px, 3px, # 333);
Index.html, agregue justo después de la etiqueta de cierre div # wrapper wrapper
Prueba de sombra de texto.
Para el último paso, he creado mixins para sombras de cuadros, gradientes de fondo, declaraciones de @ font-face y mejoramiento de la representación de tipos. Estos mixins se han probado en navegadores modernos (Firefox, Chrome, Safari, Opera, IE9) e incluyen todos los prefijos específicos del proveedor.
No voy a entrar en detalles acerca de cada uno; Los comentarios detallados se incluyen en el archivo main.scss. Los mixins siguen un formato básico y pueden desarrollarse a medida que cambian sus requisitos. Si tiene una necesidad de CSS, se puede escribir una mezcla para servirla.
Actualice sus archivos index.html y main.scss con el siguiente código. Después de actualizar, debería ver una ventana del navegador que contiene una serie de cuadros, cada uno mostrando una prueba de mezcla diferente.
Solo otro fragmento de Textmate Prueba de sombra de caja.Prueba de sombra de recuadro.Prueba de sombra de texto.Prueba de gradiente de fondo.Prueba de font-face en el Museo 700 sans..Mejorar la legibilidad del texto y la prueba de kerning..
Accentsconagua
@mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; radio-borde: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin background-clip background-clip: padding-box; @mixin radio combinada ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include background-clip; @include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); @mixin box-shadow ($ horizOffset, $ vertOffset, $ blur, $ color) / * Blur es un parámetro opcional, pero ayuda a suavizar la sombra. Llame a la mezcla aplicando valores de píxeles para $ horizOffset, $ vertOffset y $ blur, y un valor hexadecimal para $ color. La regla de contracción del borde se incluye para representar correctamente las sombras en IE9. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -moz-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -ms-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -o-box-shadow: $ horizOffset $ vertOffset $ blur $ color; box-shadow: $ horizOffset $ vertOffset $ blur $ color; colapso de la frontera: separado; @mixin box-shadow-inset ($ horizOffset, $ vertOffset, $ blur, $ color) / * Los mismos parámetros que @mixin box-shadow, pero crea una sombra interior para efectos presionados o empotrados. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; -moz-box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; -ms-box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; -o-box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; @mixin background-gradient ($ direction, $ first-color, $ second-color) background: $ first-color; imagen de fondo: -webkit-linear-gradient ($ direction, $ first-color, $ second-color); imagen de fondo: -moz-linear-gradient ($ direction, $ first-color, $ second-color); imagen de fondo: -ms-linear-gradient ($ direction, $ first-color, $ second-color); imagen de fondo: -o-lineal-gradiente ($ dirección, $ primer color, $ segundo color); imagen de fondo: degradado lineal ($ dirección, $ primer color, $ segundo color); @include clip de fondo; @mixin typography ($ font-name, $ font-longname) / * Asegúrese de crear un directorio / fonts al mismo nivel que su directorio / css para asegurarse de que las cadenas de url a continuación funcionen correctamente. Webfonts incluirá el nombre corto al que se hará referencia en las declaraciones de la familia de fuentes y el nombre largo necesario para las referencias de URL. Será necesario invocar la mezcla con la declaración @include inmediatamente a continuación para cargar las fuentes correctamente. * / @ font-face font-family: $ font-name; src: url ("… / fonts /" + $ font-longname + ".eot"); src: local ('☺'), url ("... / fonts /" + $ font-longname + ".woff") formato ('woff'), url ("… / fonts /" + $ font-longname + " .ttf ") formato ('truetype'), url (" ... / fonts / "+ $ font-longname +" .svg # webfontjVVPrHqE ") formato ('svg'); fuente-peso: normal; estilo de letra: normal; @include tipografía ("Museo700", "Museo700-Regular-webfont"); tipografía @include ("DroidSerifRegular", "DroidSerif-Regular-webfont"); @mixin mejora-legibilidad / * La mezcla de mejora-legibilidad se recomienda para encabezados y cantidades más pequeñas de texto debido a la representación de fuentes más intensiva en recursos. No se recomienda para dispositivos móviles. Para obtener más información, consulte el artículo de MDN (https://developer.mozilla.org/en-US/docs/CSS/text-rendering), o Gigaom (http://gigaom.com/2010/08/12/ optimizelegibility-for-clearer-text-in-your-browser /). Inspeccione en Chrome o Safari y active y desactive la regla de rendimiento de texto: optimice la legibilidad para ver el efecto en el kerning. También activará ligaduras en las fuentes que admiten conjuntos extendidos. * / text-rendering: optimiseLegibility; @include text-shadow (0, 0, 1px, transparente); cuerpo fondo: azul claro; Familia tipográfica: Helvetica, Arial, sans-serif; fuente-peso: normal; #wrapper, # wrapper-inset-shadow, # wrapper-text-shadow, # wrapper-background-gradient, # wrapper-font-family, # wrapper-improvement-legibility width: 750px; altura: 250px; fondo: #eee; margen: 0 auto 20px; relleno: 15px 0 0 15px; borde: 15px rgba sólido (255, 255, 255, 0.3); @include radio combinado (6px, 6px, 6px, 6px); #wrapper @include box-shadow (0, 3px, 3px, # 333); # wrapper-inset-shadow @include box-shadow-inset (0, 3px, 3px, # 333); # wrapper-text-shadow @include text-shadow (0, 3px, 3px, # 333); tamaño de fuente: 36px; color azul; # wrapper-background-gradient @include background-gradient (arriba, # 999, #fff); # wrapper-font-family font-family: "Museo700", Helvetica, Arial; # wrapper-improvement-legibilidad> h1 font-family: "DroidSerifRegular", Georgia, "Times New Roman", serif; fuente-peso: normal; tamaño de fuente: 48px; @incluir mejorar-legibilidad; 
Los mixins de Sass son una excelente manera de ponerse en marcha rápidamente con CSS3. Ya sea que esté utilizando el código wireraming o construyendo un sitio completo desde cero, los mixins mejorarán su flujo de trabajo al reducir las líneas escritas y el tiempo dedicado a revisar la sintaxis.
Debido a que estas características están centradas en CSS3, debe tener un plan de respaldo para los browers más antiguos. Para algunos sitios, las esquinas redondeadas y las sombras no son críticas, y es perfectamente aceptable mostrar un diseño visual degradado. Para otros, un polyfill como Modernizr puede proporcionar clases específicas de características para escribir reglas CSS de reserva..
Espero que te haya gustado este tutorial, gracias por leerlo.!
