Por ahora estoy seguro de que has oído hablar de Sass y de cómo "¡ Realmente necesitas comenzar a usarlo!"
Aprender una nueva herramienta puede apestar y encontrar el tiempo para hacerlo es casi imposible, pero a veces aparece una herramienta que cambia nuestra industria y es demasiado buena para ignorarla.
A medida que nuestras páginas web y nuestras aplicaciones se vuelven más complejas, nuestras hojas de estilo se vuelven más grandes y más difíciles de mantener. Los preprocesadores de CSS como Sass ayudan al mantener nuestras hojas de estilo concisas y nos permiten modularizar nuestro código a la vez que ofrecemos una gran cantidad de características que aún no están disponibles en CSS regulares.
¡Estas características adicionales también los hacen realmente divertidos de usar! Ahora es posible que haya visto algo que se ve así:
$i: 6;@while $i > 0 {.item-#{$i} {ancho: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
y pensó: "¿Qué es lo que dice? Gracias pero me quedaré con mi viejo CSS. "
Lo admito, parece desalentador y algunas personas están realmente locas, cosas complejas con Sass pero estoy aquí para decirte que cualquiera puede comenzar a usarlo y las ganancias que obtienes en el primer día te convertirán en un creyente Sass.
Obtener Sass configurado para un proyecto está un poco fuera del alcance de este artículo, pero la instalación es relativamente fácil y el sitio web de Sass tiene instrucciones para Linux, Mac o PC. Lo bueno es que, una vez que está instalado, puedes tomar cualquier archivo CSS que tengas y cambiarle el nombre .scss convirtiéndolo en un archivo Sass.
Todos los CSS correctamente formateados son válidos Sass!
Esto significa que puede comenzar a usar Sass mientras continúa escribiendo sus estilos como siempre lo hizo, incorporando lentamente más funciones a medida que crece su nivel de comodidad. Así es, amigos, exactamente lo mismo. Lo mismo ol 'pero aquí hay cinco increíbles ganancias que ahora tiene a su disposición:
¿Cuál es ese color principal de encabezado otra vez? ¿Cómo escribo esa pila de fuentes? ¿Cuántas veces ha estado escribiendo CSS y tuvo que buscar un valor en sus estilos anteriores o tuvo que abrir el cuentagotas de color una vez más para descubrir ese color hexadecimal?
Sass proporciona variables como una forma de almacenar la información que desea reutilizar a lo largo de su hoja de estilos. Ahora puede almacenar ese valor de color o pila de fuentes largas como algo fácil de recordar. La forma en que declaras una variable es con un signo de dólar $ seguido por el nombre. Este nombre puede ser lo que quieras que sea. Luego escribes un dos puntos : seguido por el valor y un punto y coma ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Ahora bien, si desea utilizar uno de estos valores, puede usar la variable en su lugar.
.mySelector { font-family: $mainFont; color: $mainColor; }
Impresionante, ¿verdad? Esta única función hace que valga la pena la instalación, ya que ahorra mucho tiempo al crear CSS. Es tan bueno que probablemente se abrirá paso en el CSS especulación pero ¿quién sabe cuándo podremos usarlo? Por suerte para nosotros, con Sass, no tenemos que esperar.
Ahora puede que te estés diciendo "CSS tiene @import, no es tan genial" y estarías en lo cierto, pero las versiones CSS y Sass difieren de manera significativa. En CSS normal @import extrae otras hojas de estilo pero lo hace al hacer otra solicitud HTTP, algo que generalmente queremos evitar. Por esta razón, es posible que ni siquiera haya usado @import anteriormente. Sass, por otro lado, es un preprocesador (énfasis en el pre) que extraerá ese archivo antes de compilar el CSS.
El resultado es una página CSS manejada por una solicitud HTTP. Lo que esto significa es que puede dividir su CSS en trozos más pequeños y más fáciles de mantener sin dejar de servir solo una página para el navegador. ¿Necesitas arreglar el texto en el botón? No más hojas de estilo de skimming buscando los estilos de botón pertinentes. Simplemente abra su botón parcial y realice los cambios.
¿Qué es un parcial? Justo como suenan. Son archivos Sass parciales que contienen pequeños fragmentos de CSS que puedes incluir en otros archivos Sass. Se nombran usando un guion bajo seguido de un nombre. _myFile.scss . El guión bajo le permite a Sass saber que el archivo es solo un archivo parcial y que no debe compilarse en CSS. Para importar este parcial solo tienes que agregar el @import a tu archivo así:
@import 'partials/myPartial';
Así que estoy importando _myPartial.scss que se encuentra en una carpeta llamada parciales. No tiene que incluir el guión bajo o la extensión de archivo. Sass es lo suficientemente inteligente como para saber a qué archivo te refieres. El uso de parciales nos permite una gran manera de modularizar nuestro código, haciéndolo más portátil y más fácil de mantener.
Sass lleva las funciones a la fiesta de CSS. Sé que no todos son programadores y el concepto de una función puede ser un poco absurdo, pero no se preocupe, muchos agregan un montón de funciones útiles sin complicar demasiado. En cuanto a los colores, hay varios útiles para manipularlos, pero tres se destacan como ganancias increíbles y fáciles para las personas que recién comienzan. Veamos cómo los usamos.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
La sintaxis es bastante directa. En las tres funciones anteriores, verá que tenemos dos argumentos para cada una. El primero es el color que queremos manipular. Puede ser hexadecimal, RGB o cualquier formato de color que sea CSS correcto. Incluso puede ser una variable. El segundo es la cantidad por la que queremos modificar ese color. Haz un 10% más oscuro, aclara un 5%, establece el alfa en 0.6. El resultado de esta función es el valor que se establece en el CSS compilado. Así que abajo verás nuestras funciones en el trabajo
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}Con suerte, ya puedes ver cómo esto podría ser útil. Hay una docena de formas de utilizar estas tres funciones para agregar un contraste de color bastante bueno y se pueden usar en cualquier lugar donde un valor de color normalmente iría. Estos tres son solo la punta del iceberg. Hay muchas más funciones de color y muchas formas creativas en que se pueden usar.
Algunas cosas en CSS son un poco tediosas de escribir. Mixins crea grupos de declaraciones CSS que podemos reutilizar en nuestro sitio. Los estilos CSS3 que requieren prefijos de proveedor son un ejemplo perfecto de cuándo usar un mixin. En lugar de escribir la misma propiedad una y otra vez, escribimos una mezcla una vez y luego la llamamos en cualquier momento que queremos usarla. Para declarar un mixin usamos el @mixin palabra clave. A continuación, le damos un nombre y aplicamos nuestros estilos entre las llaves, así: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Los argumentos pueden incluso pasar a la mixin para hacerlo más flexible. Para usar nuestro mixin solo usamos el @include palabra clave.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Como puede ver en el ejemplo anterior, llamamos a nuestro mixin con el @include seguido por el nombre de la mezcla, luego cualquier argumento dentro de paréntesis. Piensa cuánto tiempo esto te salvará. ¿Por qué no todos usan esto?
Estas herramientas han sido geniales pero he guardado lo mejor para el final. @extend es una de las características más útiles que nos permite compartir un conjunto de propiedades CSS de un selector a otro. Piense en un par de botones, como un botón de aceptar y rechazar en una ventana modal. Dado que ambos son botones, probablemente compartan la mayoría del mismo estilo, pero el botón de disminución tendrá un fondo rojo para que se destaque. Con Sass escribimos los estilos predeterminados para todos los botones y luego "ampliamos" estos estilos al botón de disminución, donde agregaríamos el fondo rojo.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Hombre, ¿qué tan maravilloso es no tener que repetirse? Esto no solo promueve la modularización de nuestros estilos, sino que también reduce el riesgo de que los estilos se desactiven de botón a botón. ¡Este es un gran ahorro de tiempo! Multiplique esto por todos los estilos del sitio y tenemos un marco de tiempo significativamente reducido para escribir CSS.
Diablos, con todo el tiempo que estamos ahorrando tal vez podríamos aprender los aspectos más complejos de Sass.
Espero haberte convencido de dar una oportunidad a esta increíble herramienta e ilustrar algunas características que podrían mejorar tu productividad de inmediato. La verdad es que podría escribir este artículo nuevamente mañana y tener cinco características más interesantes para compartir. ¡Es así de asombroso! Sass (y otros preprocesadores) llegaron para quedarse así que hazte un favor y comienza a usarlo. Para aquellos interesados en saber más, consulte estos recursos en twitter y en la Web:
Twits:
Webs:
Y si se encuentra en el área del Tri condado del sur de la Florida, únase a nosotros en el South Florida Sass Meetup .