Sass (Syntactically Awesome Style Sheets) es una extensión de CSS que le permite usar cosas como variables, reglas anidadas, importaciones en línea y más. También ayuda a mantener las cosas organizadas y le permite crear hojas de estilo más rápido. Gracias a la implementación de preprocesadores CSS en NetBeans, podrá compilar automáticamente archivos SASS sobre la marcha en su proyecto, por lo que no tendrá que ejecutar los comandos usted mismo cada vez que realice un pequeño cambio.
En este artículo, le mostraremos cómo configurar NetBeans correctamente para compilar automáticamente archivos SASS y SCSS en CSS.
Requisitos
Necesitará SASS disponible en su computadora. Sass necesita que Ruby se instale primero y que esté disponible desde la ruta en el símbolo del sistema. Una vez que Ruby esté instalado en su computadora, puede instalar la gema sass usando el siguiente comando en su terminal:
gem install sassSi ya tienes sass instalado, puede continuar con la configuración en NetBeans.
1. Acceso a la configuración
Como primer paso, proceda a abrir el cuadro de diálogo Propiedades de su proyecto. Este cuadro de diálogo le permite cambiar configuraciones específicas relacionadas con su proyecto y se almacenan en la carpeta nbproject de su proyecto. Para compilar archivos SASS en CSS automáticamente, NetBeans integra los llamados File Watchers que le permiten ejecutar alguna acción cuando realiza cambios en algunos archivos. Necesita configurar las opciones de preprocesadores CSS en su proyecto, así que abra el diálogo de propiedades haciendo clic derecho en su proyecto:
Una vez que haga clic en propiedades, aparecerá el cuadro de diálogo Propiedades del proyecto, aquí seleccione la pestaña Preprocesadores CSS y haga clic en Configurar ejecutables:
Como siguiente paso, haga clic en Configurar ejecutables y continúe con el siguiente paso.
2. Configurar la ruta ejecutable de SASS
Para ejecutar automáticamente los comandos de compilación, Netbeans necesita la ruta absoluta al compilador sass, como se instaló con Ruby, puede encontrar el archivo cmd de la ruta del compilador sass en C:\Ruby24-x64\bin\sass.bat. Proporcione esta ruta en la entrada de ruta SASS:
Aplicar o guardar cambios y seguir el último paso.
3. Configure las carpetas SASS para compilar y generar la ruta
Como último paso, debe especificar dónde están los archivos SASS que se compilarán y dónde deberían estar los archivos CSS generados. En este caso, la estructura de nuestro proyecto es la siguiente:
Así que registraría un único vigilante que convierte los archivos en /scss que /css y no se olvide de comprobar "compilar archivos SASS en Guardar", ya que se activará cada vez que se realizan cambios en los archivos de SASS:
En la carpeta raíz de nuestros proyectos está la carpeta sass donde almacenaremos todos los archivos SASS. Se compilarán automáticamente en archivos CSS cuando presione CTRL+ So guarde manualmente el archivo. Ahora puede modificar los archivos fuente de su proyecto y se integrarán automáticamente en CSS y estarán listos para la producción (tenga en cuenta que también deberá minimizar esos archivos para la producción).
Que te diviertas ❤️!
Conviertete en un programador más sociable