Una guía simple y fácil de entender Sass

Hace un tiempo, Thoriq Firdaus escribió un excelente artículo acerca de cómo empezar con Sass que le mostró cómo instalar y usar este lenguaje de preprocesador de CSS de gran utilidad (es posible que desee consultarlo, ya sabe, para comenzar).

En este artículo, pensé en darte más información sobre lo que puedes hacer con Sass y cómo los desarrolladores lo usan todos los días para crear un código CSS mejor y más modular. Avance a la sección que desee:

• Herramientas del Comercio
• Variables
• Anidando
• Extendiendo reglas
• Mixins
• Selectores de marcador de posición
• Operaciones
• Funciones

Herramientas del comercio

Thoriq le mostró cómo puede usar Sass desde la línea de comando usando el comando sass --watch .

Si prefiere las herramientas de GUI, puede ir con mi aplicación favorita, Codekit, una herramienta de desarrollo web para compilar Sass, concatenar, autoprefixar y mucho más. Prepros es otra aplicación muy capaz que se puede utilizar en todos los sistemas. Ambas son aplicaciones de pago, pero valen la pena si las va a utilizar a largo plazo.

Si solo quiere probar Sass sin pagar nada, puede usar la terminal, o Koala (aquí está nuestra revisión), una aplicación gratuita multiplataforma, que puede mantener su posición frente a las contrapartes premium.

Variables

Una de las primeras cosas que necesitará para entender es las variables. Si proviene de un PHP u otro fondo de lenguaje de codificación similar, esto será una segunda naturaleza para usted. Las variables son para almacenar bits y piezas de información reutilizable, como un valor de color, por ejemplo:

 $ primary_color: # 666666; .button {color: $ primary_color; } .important {color: $ primary_color; } 

Esto puede no parecer útil aquí, pero imagine tener 3, 000 líneas de código. Si su combinación de colores cambia, deberá reemplazar cada valor de color en CSS. Con Sass puedes simplemente modificar el valor de la variable $primary_color y terminarlo.

Las variables se utilizan para almacenar nombres de fuentes, tamaños, colores y una gran cantidad de otra información . Para proyectos más grandes, vale la pena extraer todas sus variables en un archivo separado (veremos cómo se hace pronto). Lo que esto le permite hacer es volver a colorear todo el proyecto y cambiar las fuentes y otros aspectos clave sin tocar las reglas de CSS . Todo lo que necesitas hacer es modificar algunas variables.

Anidando

Otra característica básica que Sass te brinda es la capacidad de anidar las reglas . Supongamos que está creando un menú de navegación. Tiene un elemento de nav que contiene una lista desordenada, elementos de lista y enlaces. En CSS puedes hacer algo como esto:

 #header nav {/ * Reglas para el área de navegación * /} # header nav ul {/ * Reglas para el menú * /} # header nav li {/ * Reglas para los elementos de la lista * /} # header nav a {/ * Reglas para enlaces * /} 

En los selectores, nos estamos repitiendo mucho. Si los elementos tienen raíces comunes, podemos usar el anidamiento para escribir nuestras reglas de una manera mucho más limpia .

Así es como podría verse el código anterior en Sass:

 #header {nav {/ * Reglas para el área de navegación * /} ul {/ * Reglas para el menú * /} li {/ * Reglas para los elementos de la lista * /} a {/ * Reglas para enlaces * /}} 

El anidamiento es extremadamente útil porque hace que las hojas de estilo (mucho) sean más legibles . Al utilizar la anidación junto con la sangría adecuada, puede lograr estructuras de código altamente legibles, incluso si tiene una cantidad considerable de código.

Un inconveniente de la anidación es que puede conducir a una especificidad innecesaria . En el ejemplo de arriba me he referido a enlaces con #header nav a . También podría usar #header nav ul li a que probablemente sería demasiado.

En Sass, es mucho más fácil ser muy específico ya que todo lo que necesitas hacer es anidar tus reglas. Lo siguiente es mucho menos legible y bastante específico.

 #header {nav {/ * Reglas para el área de navegación * / ul {/ * Reglas para el menú * / li {/ * Reglas para los elementos de la lista * / a {/ * Reglas para los enlaces * /}}}}} 

Extendiendo reglas

La extensión te resultará familiar si trabajas con lenguajes orientados a objetos. Lo mejor es entenderlo a través de un ejemplo, vamos a crear 3 botones que son pequeñas variaciones el uno del otro.

 .button {display: inline-block; color: # 000; antecedentes: # 333; radio del borde: 4px; relleno: 8px 11px; } .button-primary {@extend .button; fondo: # 0091C2} .button-small {@extend .button; tamaño de letra: 0.9em; relleno: 3px 8px; } 

Las .button-primary y .button-small extienden la clase .button, lo que significa que asumen todas sus propiedades y luego definen las propias.

Esto es inmensamente útil en muchas situaciones en las que se pueden usar variaciones de un elemento. Los mensajes (alerta / éxito / error), los botones (colores, tamaños), los tipos de menú, etc., podrían usar la funcionalidad de ampliación para una gran eficacia de CSS.

Una advertencia de extender es que no funcionarán en las consultas de medios como es de esperar. Esto es un poco más avanzado, pero puede leer todo sobre este comportamiento en Descripción de selectores de marcadores de posición: los selectores de marcadores de posición son un tipo especial de extensión de los que hablaremos pronto.

Mixins

Mixins es otra característica favorita de los usuarios de preprocesador. Los Mixins son conjuntos de reglas reutilizables, perfectos para reglas específicas del proveedor o para reglas de CSS largas.

¿Qué tal si creamos una regla de transición para los elementos de desplazamiento rápido?

 @mixing hover-effect {-webkit-transition: color de fondo 200ms; -moz-transition: color de fondo 200ms; -o-transition: color de fondo 200ms; transición: color de fondo 200ms; } a {@include hover-effect; } .button {@include hover-effect; } 

Mixins también le permite usar variables para definir los valores dentro de la mezcla . Podríamos reescribir el ejemplo anterior para darnos el control sobre la hora exacta de la transición . Es posible que deseemos botones para la transición un poco más lento, por ejemplo.

 @mixin hover-effect ($ speed) {-webkit-transition: background-color $ speed; -moz-transition: color de fondo $ velocidad; -o-transition: color de fondo $ velocidad; transición: color de fondo $ velocidad; } a {@include hover-effect (200ms); } .button {@include hover-effect (300ms); } 

Selectores de marcador de posición

Los selectores de marcadores de posición se introdujeron con Sass 3.2 y resolvieron un problema que podría causar un poco de hinchazón en el código CSS generado. Eche un vistazo a este código que crea mensajes de error:

 .message {font-size: 1.1em; relleno: 11px; ancho del borde: 1px; border-style: sólido; } .message-danger {@extend .message; fondo: # C20030; color: #fff; color de borde: # A8002A; } .message-success {@extend .message; fondo: # 7EA800; color: #fff; color del borde: # 6B8F00; } 

Es muy probable que la clase de mensaje nunca se use en nuestro HTML: se ha creado para que se extienda, no se use tal cual . Esto causa un poco de hinchazón en su CSS generado. Para que su código sea más eficiente, puede usar el selector de marcador de posición que se indica con un signo de porcentaje:

 % de mensaje {font-size: 1.1em; relleno: 11px; ancho del borde: 1px; border-style: sólido; } .message-danger {@extend% button; fondo: # C20030; color: #fff; color de borde: # A8002A; } .message-success {@extend% button; fondo: # 7EA800; color: #fff; color del borde: # 6D9700; } 

En esta etapa, usted se estará preguntando cuál es la diferencia entre extends y mixins. Si usa marcadores de posición, se comportan como un mixin sin parámetros. Esto es cierto, pero el resultado en CSS difiere. La diferencia es que mixins duplica las reglas mientras que los marcadores de posición se aseguran de que las mismas reglas compartan selectores, lo que resulta en menos CSS al final.

Operaciones

Es difícil resistirse al juego de palabras aquí, pero me abstendré de bromas médicas por el momento. Los operadores le permiten hacer algunas operaciones matemáticas en su código CSS y pueden ser muy útiles. El ejemplo en la guía Sass es perfecto para mostrar esto:

 .container {ancho: 100%; } article {float: left; ancho: 600px / 960px * 100%; } a un lado {flotador: derecho; ancho: 300px / 960px * 100%; } 

El ejemplo anterior crea un sistema de grillas basado en 960px con una molestia mínima. Se compilará muy bien con el siguiente CSS:

 .container {ancho: 100%; } article {float: left; ancho: 62.5%; } a un lado {flotador: derecho; ancho: 31.25%; } 

Un gran uso que encuentro para las operaciones es mezclar colores. Si echas un vistazo al mensaje de éxito Sass anterior, no está claro que el color del fondo y el borde tengan algún tipo de relación. Al restar un tono de gris podemos oscurecer el color, haciendo visible la relación:

 $ primary: # 7EA800; .message-success {@extend% button; fondo: $ primario; color: #fff; border-color: $ primary - # 111; } 

Cuanto más claro sea el color restado, más oscuro será el tono resultante. Cuanto más claro es el color agregado, más claro es el tono resultante.

Funciones

Hay una gran cantidad de funciones para usar: funciones de números, funciones de cadenas, funciones de listas, funciones de color y más. Echa un vistazo a la larga lista en la documentación del desarrollador. Echaré un vistazo a un par aquí solo para mostrarte cómo funcionan.

La función de lighten y darken se puede usar para cambiar la claridad de un color. Esto es mejor que restar sombras, todo lo hace aún más modular y obvio. Eche un vistazo a nuestro ejemplo anterior utilizando la función de oscurecimiento.

 $ primary: # 7EA800; .message-success {@extend% button; fondo: $ primario; color: #fff; border-color: oscurecer ($ primary, 5); } 

El segundo argumento de la función es el porcentaje de oscurecimiento requerido. Todas las funciones tienen parámetros; ¡eche un vistazo a la documentación para ver cuáles son! Aquí hay algunas otras funciones de color que se explican por sí mismas: desaturate, saturate, invert, grayscale .

La función ceil, al igual que en PHP, devuelve un número redondeado al siguiente número entero. Esto se puede usar al calcular el ancho de las columnas o si no desea usar muchos lugares decimales en el CSS final.

 .title {font-size: ceil ($ heading_size * 1.3314); } 

Visión de conjunto

Las características en Sass nos dan un gran poder para escribir mejor CSS con menos esfuerzo. El uso adecuado de mixins, extends, funciones y variables hará que nuestras hojas de estilo sean más fáciles de mantener, más legibles y más fáciles de escribir.

Si está interesado en otro preprocesador de CSS similar, le sugiero que consulte LESS (o consulte nuestra guía para principiantes): ¡el principal subyacente es el mismo!

Facebook está probando una nueva función "Buscar Wi-Fi" en su aplicación iOS

Encontrar un punto de acceso público a Wi-Fi ya no es un gran desafío, ya que parece que Facebook ha comenzado a probar una nueva función de "Buscar Wi-Fi" en la aplicación de Facebook de iOS.Descubierta por primera vez por el director de redes sociales de The Next Web, Matt Navarra, esta función detectará lugares cercanos con puntos de acceso Wi-Fi . La f

(Consejos de tecnología y diseño)

Multitarea: por qué es malo y por qué esta locura tiene que detenerse

La multitarea ha recibido una mala reputación y si haces varias tareas y parece que olvidas mucho las cosas, eso significa que la multitarea está comenzando a pasar factura . He estado bromeando diciendo que mi pérdida de memoria a corto plazo se debe a tener hijos, pero después de un tiempo la gente comienza a mencionar conversaciones de las que no tengo memoria, y tareas atrasadas que aún me olvido hacer o actualizar.Desp

(Consejos de tecnología y diseño)