Es posible que haya oído hablar del preprocesamiento de CSS y se pregunte de qué se trata todo el alboroto. Puede que hayas oído hablar de Hablar con descaro a o MENOS .

En resumen, el preprocesamiento de su CSS le permite escribir hojas de estilo más concisas que están formateadas muy bien y requieren técnicas menos repetitivas que se encuentran comúnmente al escribir código CSS. El resultado es un estilo más dinámico y una gran cantidad de tiempo ahorrado al desarrollar sitios web o aplicaciones.

Si ya escribe CSS, entonces puede aprender fácilmente a preprocesar su CSS. Una vez que comprenda el alcance de Sass, se preguntará por qué no cambió antes.

¿En qué se diferencia Sass de CSS?

Sass tiene un aspecto similar al CSS, pero tiene sus diferencias obvias una vez que te sumerges. Hay dos formas de escribir Sass y, en última instancia, depende de ti el estilo que prefieras. Utilizo el estilo sangriento y entre corchetes (.scss) en mis proyectos porque me gusta visualizar realmente dónde termina un bloque y comienza cuando se anida una gran cantidad de código. Una vez procesado, el código Sass se compila en CSS tradicional de forma automática utilizando un motor de preprocesamiento.

Hay muchas aplicaciones disponibles que permiten que la precompilación de su Sass sea perfecta y francamente fácil. Para instalar, puede usar la línea de comando siempre que tenga instalado Ruby en su máquina. Si no se siente cómodo con la línea de comandos, hay otras opciones (más sobre esto a continuación) y si esto le pasa, visite Sass-lang.com para aprender cómo hacerlo en un sencillo y paso a paso. Al final, usando cualquier método, ya sea línea de comando o aplicación, la instalación de Sass observará sus cambios y se compilará automáticamente para usted.

Recomiendo usar aplicaciones como Codekit , LiveReload , o Mezcla que te ayudan a configurar un proyecto Sass en una Mac desde cero o si eres un usuario de Windows te recomiendo PrePros . Codekit, mi elección de preprocesador, me ayuda al preprocesar mi Sass, así como validar y minificar su código para permitir que su sitio web funcione de manera rápida y efectiva. (La capacidad de crear Brújula o Borbón los proyectos basados ​​en Codekit también son una característica increíble, pero están fuera del alcance de este artículo.) Después de que se sienta más cómodo con Sass, asegúrese de ver cómo usar Compass y Bourbon en sus proyectos Sass.

Entonces, ¿qué es Sass?

Sass significa Syntactically Awesome Stylesheets y fue creado por Hampton Catlin . Sass presenta nuevos conceptos como variables, mixins y anidamiento en el código CSS que ya conoce y ama. Estos conceptos finalmente hacen que su CSS sea increíble, más fácil de escribir y más dinámico. Todas estas características combinadas aceleran el flujo de trabajo de cualquier diseñador o desarrollador.

Lo que comúnmente confunde a las personas son las formas alternativas de escribir Sass. Verá otros tutoriales o explicaciones de Sass utilizando .SCSS o la extensión .Sass para sus archivos Sass. Esto es evidente porque hay dos formas de escribir el código que producen el mismo resultado. El más común que he visto, y el método que uso actualmente es la versión entre corchetes conocida como .SCSS. Otro método es la extensión .Sass, que depende más de la indentación que de los elementos puntuales y depende del espacio en blanco. Con esta sintaxis no hay necesidad de punto y coma o corchetes como se ve en CSS y la sintaxis .SCSS.

Mira el ejemplo a continuación.

.CSS

#container {width:960px;margin:0 auto;}#container p {color: black;}

.SCSS

/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}

.Hablar con descaro a

/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$black

Estructura

Está bien, entonces ahora probablemente te estés preguntando cómo configurar Sass para tus propios proyectos. El proceso es bastante fácil, especialmente si usa Codekit o una aplicación similar para ayudarlo en el camino.

Una estructura de archivos típica de un proyecto Sass se parece al siguiente esquema. Esto puede parecer desalentador, pero prometo que su flujo de trabajo mejorará una vez que entienda cómo funcionan las cosas juntas. Al final, todos sus Sass se compilan en un solo archivo CSS, que será el archivo que incluya dentro de sus documentos de trabajo, ya sea HTML, PHP, etc.

stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.

La forma en que configuras tu estructura en última instancia depende de ti. Comience con una estructura básica y sintonice sus propias necesidades y flujo de trabajo.

@Importar

Sass amplía la regla @import CSS para permitirle importar archivos Sass y SCSS. Todos los archivos importados se fusionan en un único archivo CSS de salida. Además, las variables o mixins definidos en los archivos importados se transfieren al archivo principal, lo que significa que puede mezclar y combinar virtualmente cualquier archivo y asegurarse de que todos sus estilos permanezcan en un nivel global.

@import toma un nombre de archivo para importar. Como último recurso, los archivos Sass o SCSS se importarán a través del nombre de archivo que elija. Si no hay extensión, Sass intentará encontrar un archivo con ese nombre y la extensión .scss o .Sass e importarlo.

Si tiene una configuración de proyecto Sass típica, notará algunas reglas @import dentro de un archivo base. Esto simplemente le permite tener varios archivos que se sincronizan de manera efectiva una vez que se compilan, por ejemplo:

@import "main.scss";

o:

@import "main";@Partials

Si tiene un archivo SCSS o Sass que desea importar pero no compilar en CSS, puede agregar un guión bajo al comienzo del nombre del archivo, que también se conoce como Parcial. A medida que el código se compila, Sass ignorará los parciales al procesar a CSS. Por ejemplo, podría tener _buttons.scss, no se crearía el archivo _buttons.css y entonces puede @importar "botones";

La mejor práctica es crear un directorio de parciales y colocar todos sus archivos Sass parciales dentro de él. Hacer esto asegura que no tendrá ningún nombre de archivo duplicado que Sass no permita, por ejemplo, el _buttons.scss parcial y el archivo buttons.scss no pueden existir en el mismo directorio. Usar parciales es una excelente manera de mantenerse organizado a nivel global. Mientras importes el archivo, el Sass que escribas se puede usar durante todo el proyecto. Normalmente dentro de los parciales creo mixins o variables para usar en todo mi proyecto. Los nombro en función de sus contenidos y los elementos que están diseñando.

Variables

Las variables en CSS son un gran avance en el desarrollo web moderno. Con Sass puede crear variables para cosas como fuentes, colores, tamaños, margen, relleno, etc. La lista es interminable. Si escribe JavaScript o PHP, el concepto es bastante similar en términos de definición de variables y convenciones.

Entonces, ¿por qué usar variables? Las variables fáciles le permiten usar un elemento más de una vez, similar a una clase en HTML o una variable en JavaScript. Por ejemplo, supongamos que defines varios divs con un color de fondo específico. Puede usar la variable que es más fácil de recordar en lugar del código hexadecimal tradicional o el cálculo RGB. Hacer una variable con un nombre fácil de recordar permite menos copiar y pegar y un flujo de trabajo más productivo. El mismo concepto se aplica siempre que se puede implementar una variable, y con Sass que está virtualmente en cualquier parte, por ejemplo este .scss:

#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}

dará como resultado este archivo .css:

#container {font-size: 12px;padding: 10px;color: #C0392B;}

Operaciones y funciones

La parte interesante de las variables es que son extremadamente similares a las utilizadas en los lenguajes de scripting. Las variables dentro de Sass se pueden usar dentro de operaciones y funciones. Las operaciones matemáticas estándar (+, -, *, / y%) son compatibles con los números. Para los colores hay funciones integradas en Sass que se enfocan en la claridad, el tono, la saturación y más.

Tener esta funcionalidad hace que tu código sea más dinámico que nunca. Por ejemplo, si desea cambiar el color del enlace general de su sitio, simplemente puede cambiar la variable, volver a compilar y su sitio se actualizará de forma dinámica en todo. Consulte otro ejemplo a continuación para obtener una lista de navegación reutilizable, este .scss:

nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);}  }} 

dará como resultado este .css:

nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}

Anidando

Anidar es una gran razón por la que amo a Sass. Al final, escribe menos líneas de código y todo su código es fácil de leer debido al formateo anidado. (El mismo concepto de anidación también se encuentra en LESS).

Hay dos tipos de anidamiento:

Selector de selectores

El agrupamiento de selectores en Sass es similar a cómo anidaría HTML:

Main Content
Sidebar Content

La versión de anidación de Sass:

#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}

daría como resultado el siguiente CSS:

#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}

Anidación de propiedades

El segundo tipo de anidación es el anidamiento de propiedades. Puede anidar propiedades con el mismo prefijo para mejorar los elementos de destino, lo que resulta en menos líneas de código, por ejemplo esto:

#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}

daría como resultado este CSS:

#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}

Mixins

De todas las características Sass Mixins tiene que ser el más poderoso. Mixins es similar a una variable pero en esteroides. Puede definir un estilo completo de un elemento y reutilizar esos estilos en todo su proyecto.

Mixins se define utilizando la directiva @mixin , que toma un bloque de estilos que creó anteriormente y lo aplica al selector de su elección utilizando la directiva @include . A continuación se muestra un patrón de CSS común utilizado para crear un menú de navegación horizontal. En lugar de escribir el mismo código para cada instancia de navegación, simplemente use un mixin y luego inclúyalo donde sea necesario. Este concepto se puede hacer para cualquier cosa que utilice una y otra vez, como botones, tipografía, gradientes, etc.

/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}

Y aquí incluimos el mixin con una línea de código:

ul.navbar {@include navigate;}

que da como resultado este CSS compilado:

ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}

Incluso puede llegar a crear mixins personalizables que usan argumentos para actualizar dinámicamente. Además de eso, puedes incluir mixins dentro de otras mixins o crear funciones usando mixins y más. El poder detrás de esto es absolutamente enorme.

Hay algunas colecciones de mixin predefinidas populares en las que mencioné anteriormente llamadas Compass y Bourbon. Con una @import simple en su proyecto, puede tener acceso a mixins ya generados de uso común en la web. Hay tantas opciones que es difícil cubrir todo lo disponible, pero definitivamente es divertido experimentar y ensuciarse las manos desarrollando animaciones personalizadas o transiciones con unas pocas líneas de código en lugar de una pantalla llena. Mixins hace que el desarrollo de navegadores cruzados sea muy fácil si no tiene ganas de escribir prefijos definidos por el navegador una y otra vez dentro de su CSS.

Por ejemplo, aquí creamos una mezcla con argumentos que le permiten personalizarse.

@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }

que nos da este CSS cuando se compila:

p {border-color: blue;border-width: lin;border-style: dashed;}

Resumen

Si bien Sass tiene una curva de aprendizaje, realmente creo que una vez que comprenda los métodos y la sintaxis, nunca más querrá volver a escribir CSS estándar.

Sass es extremadamente poderoso y solo he cubierto los conceptos básicos aquí. Con CSS tradicional, todos hemos encontrado copiar y pegar o encontrar y reemplazar tareas que pierden tanto tiempo en la etapa de desarrollo de su proyecto. Prueba Sass y descubre cómo crear un flujo de trabajo efectivo en tus proyectos futuros.

¿Utiliza Sass, o prefiere un preprocesador de CSS diferente? ¿Tienes un mixin favorito? Háganos saber en los comentarios.

Imagen / miniatura destacada, usa imagen de cero a héroe a través de Shutterstock.