Alex Plaza

UX & Front-end Developer

Las Ventajas de Usar un Preprocesador de CSS

Qué es un preprocesador de css

Seguramente has oído hablar de los preprocesadores de CSS, pero no sabes mucho al respecto o te asusta lo complicado que podrían llegar a ser. Un preprocesador de CSS es un programa que se termina compilando en CSS. Pero además del mágico programa compilador y el lenguaje de salida(output, CSS en nuestro caso), tenemos el lenguaje de entrada(input) y que suele escribirse con una sintaxis ligeramente similar a la del output.

Suena complicado ¿cierto?, pero la verdad es que si sabes como usar CSS no necesitas nada más que las ganas para empezar a disfrutar de los beneficios de usar un preprocesador de CSS.

Cuál es la idea de usar un preprocesador

La idea detrás de un preprocesador es poder hacer más con menos, poder aplicar de mejor forma el concepto de DRY(don’t repeat yourself) en el caso específico de CSS, y terminar con un código más escalable y por qué no, que puedas reciclar en distintos proyecto.

Entonces ¿necesito solo las ganas?

Sí, solo eso. Si bien los preprocesadores tienen usos muy variados al usar conceptos que encontramos en un lenguaje de programación(no como css que no es un lenguaje de programación) puedes empezar a usarlos sin saber demasiado. Así que vamos al grano y revisemos el primer ejemplo.

Sass (.scss)

Ok, última aclaración. Para este ejemplo y probablemente a lo largo de mis posts utilizaré Sass(existen otros preprocesaroes, pero prefiero hablarles de algo que conozco y manejo mejor). Sass es un preprocesador que nació en Ruby y su sintaxis es algo de lo que hablaré más adelante, lo importante es que su syntax ha evolucionado a SCSS o “Sassy CSS” y es esta syntax la que utilizaré, ya que es 100% compatible con CSS, es la más usada actualmente por la comunidad Sass para encontrar documentación y ejemplos, y porque la reconocerán de inmediato. Por términos prácticos me referiré a SCSS como Sass de ahora en adelante.

Ahí Vamos: Ventaja Nº 1

Un excelente uso que puedes hacer de un preprocesador. Es utilizarlo para organizar tu CSS y hacerlo más modular. Sass te permite crear variados archivos de CSS bajo el formato de .scss y luego compilarlos todos en un solo css, que terminarás usando en producción en tu sitio web, web-app o proyecto.

Veamos un ejemplo:

ejemplo nesting

Para este proyecto estoy usando Foundation como un framework de Sass, así que hay varias cosas para distraerse, pero enfoquémonos en la carpeta es “scss_dev”, aquí mantengo mis estilos separados unos de otros, y no solo en archivos sueltos, sino que en carpetas que contienen otros archivos u otras subcarpetas. Lo importante es que puedas darle un orden que entiendas tú y tu equipo de desarrollo(si trabajas con más gente). El guión bajo _ delante de cada archivo .scss es una forma de decirle al preprocesador que ignore esos archivos y no los compile por separado cada uno, porque son solo partes de algo más. El archivo que sí se compilará en CSS es el que no tiene _ delante, y es foundation.scss, veamos como se ve el código de dicho archivo.

// veginning CUSTOM SCSS FILES
@import
    "global/variables",
    "global/mixins",
    "global/global",

    // ROWS AND COLUMNS
    "rows-n-cols/hero",
    "rows-n-cols/blocks",

    // TYPOGRAPHY
    "typography/types",

    // BUTTONS
    "buttons/buttons",

    // FOOTER
    "footer-styles/footer";

probablemente reconozcas el @import que ya se usa en CSS para importar otros CSSs, pero también debes saber que si lo usas en producción hará una request extra al servidor por cada uno de los archivos importado, lo que igual de malo que llamar a muchos archivos CSS por separado en el head de tu sitio impidiendo que tu contenido cargue de forma expedita. En Sass este @import cumple una función similar pero distinta porque si bien llama o ‘importa’ a los archivos que le indiques, estos terminan siendo preprocesados en un solo archivo css, ideal para producción.

PROTIP: no es necesario anteponer el guión bajo _ de los archivos cuando haces la importación con @import YEY!

Nesteo: Ventaja Nº2

Otro de los grandes beneficios que son simples de entender y aplicar para cualquiera que entienda de CSS es el nesting. Sass te permite nestear los selectores de CSS dentro de otros selectores para así no tener que repetir una y otra vez la clase de tu .selector-principal cada vez que quieras darle estilo a algo al interior de dicho selector.

Veamos un ejemplo de nesting con un navegador básico:

<nav class="main-nav">
    <ul>
        <li><a>Home</a></li>
        <li><a>Productos</a></li>
        <li><a>Lugares</a></li>
        <li><a>Perfil</a></li>
    </ul>
</nav>
.main-nav {
    background: #2ECC71;
    width: 100%;
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
    }

    li {
        display: inline-block;
        width: 25%;
        text-align: center;
    }

    li:not(:last-child) {
        margin-right: -4px;
    }

    a {
        display: block;
        padding: 1rem .5rem;
        color: white;
        &:hover {
            background: #26A65B;
        }
    }
}

Como pueden ver he usado una sola clase para darle estilo a este navegador y todos los demás tags han sido declarados dentro de esa clase. Esto me permite darle estilo a esos tags sin tener que anteponerles una y otra vez el nombre de la clase .main-nav. Recuerda que esto no significa que el browser vaya a leer así mis estilos, los leerá desde el CSS que repite todo, de todas maneras. Pero como desarrolladores y HUMANOS no tenemos porqué preocuparnos de repetir una y otra vez la misma clase o buscar una clase entre un CSS de más de 3.000 lineas, Gracias a Sass podemos separar nuestro CSS en pequeños trozos mantenibles y repetir menos veces nuestras clases.

PROTIP: No abusar del nesting, si te encuentras a 5 niveles de profundidad: ¡Necesitas más Clases!

Bueno, este sería el output del último tags que declaré dentro de la clase .main-nav en el ejemplo anterior

.main-nav a {
    display: block;
    padding: 1rem .5rem;
    color: white;
}

.main-nav a:hover {
    background: #26A65B;
}

Acá sucede algo interesante con el símbolo amperzand &. Si se fijan está nesteado un nivel más abajo que el resto de los tags. Su significado es similar al $(this) que usa jquery. Significa: “soy este mismo tag en donde estoy nesteado” y hablaré más acerca de & en mi siguiente post, pero los invito a averiguar por su cuenta sobre el amperzand en Sass, porque termina siendo muy útil.

Ok, en este ejemplo nos hemos adentrado mucho más en lo que es escribir CSS in a Sassy way. Y probablemente te preguntes, como diablos puedes conseguir hacer esto, bueno, más adelante haré un post que te guíe a través del proceso de compilación de forma local en tu equipo. Pero por ahora te recomiendo que visites Sassmeister.com y que escribas tus primeras lineas de Sass para que veas en vivo cuál es el CSS de salida. ¡Te impresionarás!

Bueno, creo que por ahora lo dejaré hasta aquí, porque si es primera vez que te aventuras en un preprocesador, probablemente todo esto te haya volado la cabeza(in a good sense). Pero prometo que continuaré lo antes posible ¡ahora mismo en verdad! con la segunda parte, por si quedaste con ganas de más.

Siéntete libre de dejar un comentario con tus dudas al respecto.

Saludos.

comments powered by Disqus