CSS moderno con Sass - Tutorial práctico

CSS puede escribirse de forma mucho más eficaz gracias a los preprocesadores de CSS. Este vídeo muestra qué son estos preprocesadores, cuáles están disponibles y por qué se ha elegido Sass para esta serie.

Antes de poder usar Sass, tienes que instalarlo. Y Ruby es un prerrequisito para esto. Ambos - la instalación de Ruby y Sass - se muestran en este video. Luego puedes probar si la instalación de Sass realmente funcionó.

Los archivos Sass deben convertirse en archivos CSS para que puedan utilizarse realmente. Gracias al comando Watch, puede reconocer fácilmente los cambios en archivos individuales o en directorios enteros.

Los archivos SCSS pueden importarse y fusionarse mediante @import. Qué tiene que ver todo esto con un guión bajo delante del nombre del archivo es un aspecto de este vídeo.

Sass ofrece la opción de declarar variables. Este concepto no está disponible en CSS convencional, pero en Sass es una herramienta ingeniosa para el desarrollo eficaz de hojas de estilo.

Gracias al anidamiento, la sintaxis de Sass puede ser mucho más sencilla de lo que es habitual en CSS. La anidación también ayuda a escribir el código con mucha más claridad.

El uso de @extend permite pasar un conjunto de propiedades CSS de un selector a otro. Esto también ayuda a mantener Sass archivos magra.

El selector de marcadores de posición permite definir módulos. Esta modularización permite dividir la sintaxis de Sass en bloques lógicos que pueden integrarse en varios puntos.

Los mixins son funciones que pueden utilizarse, por ejemplo, para simplificar considerablemente los flujos de trabajo. Este vídeo le muestra cómo definir y utilizar sus propios mixins.

Con el selector, que es el tema de este vídeo, puede acceder al elemento padre de un elemento. Este selector no se conoce en CSS, por lo que ofrece un enorme valor añadido.

Sass permite el uso de bucles for. Esto funciona de forma muy sencilla en Sass y puede utilizarse, por ejemplo, para definir su propio sistema de cuadrícula.

Además de los bucles For, los bucles Each y While también pueden utilizarse en Sass. Este vídeo muestra cómo se pueden utilizar para la automatización.

En lenguajes como PHP y JavaScript, es posible reaccionar a diferentes eventos usando if y else. Algo así existe también en Sass. Este vídeo muestra cómo se puede utilizar.

Se puede calcular en Sass. Esto es útil para definir tamaños de fuente, por ejemplo. Gracias a los operadores correspondientes, también puedes crear tu propio sistema de cuadrícula personalizado.

Por supuesto, los colores pueden definirse en Sass. Sin embargo, Sass también va mucho más allá que el CSS convencional en este ámbito. Gracias a las funciones correspondientes, los colores pueden manipularse fácilmente, por ejemplo.

El framework Compass multiplica las posibilidades de Sass. Este primer vídeo muestra cómo instalar y utilizar Compass.

El sitio web del proyecto Compass es el recurso central de información cuando se trata de trabajar con este framework. Te mostraré cómo trabajar con la documentación utilizando las características CSS3 de Compass.

Un ejemplo muestra lo fácil que es implementar cosas con Compass. Al final de esta serie, también echamos un vistazo a un framework Sass alternativo. Susy ofrece un sistema de rejilla magra.