Dale vida a tus proyectos de manera profesional y ordenada

Cuando trabajamos en grandes proyectos, darle vida a esa estructura HTML, puede volverse tedioso, aburrido y abrumador, por eso hoy, quiero mostrarte como puedes usar SASS para darle estilos a tus proyectos, de una forma divertida, fácil y bien organizada.

Adorarás trabajar con SASS, ya que podrás usar características que aún no existen en CSS, como variables, anidamiento, mixins, herencia y otras cosas geniales. Aquí te dejo un enlace donde podrás consultar la documentación del preprocesador SASS.

Para iniciar a trabajar con SASS, lo primero que debemos hacer es instalar, en este caso, te mostrare como instalarlo desde la línea de comandos, donde también podrás compilar tus archivos .SASS y .SCSS a .CSS.

Si usas Node. js solo basta con ejecutar las siguiente línea de comandos:

npm install -g sass

Debes tener en cuenta, que con este procedimiento, estarás instalando la implementación de JavaScript puro de SASS que se ejecuta un poco más lento, pero no te preocupes, tiene la misma interfaz, así que será fácil cambiar a otra implementación si necesitas más velocidad, para ello, instala Chocolatey para windows y ejecuta la siguiente línea de comandos para instalar Dart Sass.

instalar choco sass

Para Mac OS X puedes instalar Homebrew y ejecutar la siguiente línea de comando para instalar Dart Sass.

instalar brew sass / sass / sass

Una vez ejecutado el comando de instalación, ejecute sass -- versión, para asegurarse de que se instaló correctamente. Si la instalación es correcta deberá arrojarle 1.22.10.

Ahora ya estás listo para crear tu primera hoja de estilos .SASS o .SCSS y compilar utilizando la terminal. Ejecuta la siguiente línea de comando para compilar:

sass nombrehojadeestiloinput.sass nombrehojadeestilooutput.css

Con esto ya podrás enlazar tu hoja de estilos output.css en tu proyecto.

También podrás trabajar y ver los cambios simultáneamente sin tener que compilar cada vez.

La siguiente línea de comando le indica a Sass que debe revisar los archivos de origen en busca de cambios y que vuelva a compilar CSS cada vez que se guarde en Sass.

sass --watch input.scss output.css

Aquí te dejo un enlace para que puedas conocer la sintaxis de .SASS y .SCSS

La flexibilidad de SASS te ayudará a trabajar de manera más organizada. ¡Anímate a usarlo!