Home | Clases | Sass y SCSS | Configuración

Configuración


Configuración en NetBeans

El último paso que nos quedaría para poder utilizar SASS o SCSS en nuestro proyecto sería configurar (o comprobar dicha configuración) nuestro IDE NetBeans para que precompile dichos archivos. Esto incluye dos pasos:

1. Una configuración global válida para todos los proyectos.

Accede a Tools > Options > HTML/JS > CSS Preprocessors (o NetBeans > Preferences > HTML/JS > CSS Preprocessors para Apple) y comprueba que se han añadido correctamente las rutas de los programas que acabamos de instalar, si no es así, añádelas buscando la instalación en tu ordenador. Fíjate que en el caso de sass hemos utilizado el fichero node-sass.cmd:



2. Una configuración única para cada proyecto.

Debemos indicar a NetBeans tres cosas:

  • Dónde se encuentra cada uno de nuestros archivos SASS, SCSS o LESS.
  • Dónde debe compilar dichos archivos como CSS.
  • Si queremos que los compile cada vez que salvemos el archivo (recomendado).


Los pasos a seguir, una vez creado un nuevo proyecto en NetBeans, serían:

  • Clic derecho en el proyecto > Properties > CSS Preprocessors
  • En la pestaña Sass, marcar la casilla Compile Sass Files on Save y seleccionar carpeta scss como input y css como output. Si queremos diferenciar los archivos sass y scss en carpetas, podemos crear una nueva carpeta para ello (ver imagen).
  • En la pestaña LESS, marcar la casilla Compile LESS Files on Save y seleccionar carpeta less como input y css como output.
  • Por supuesto, dichas carpetas scss, sass y less deben existir en el proyecto al mismo nivel que la carpeta css


A continuación se muestran capturas de cada pestaña:





Configuración en WebStorm

La configuración en WebStorm es similar aunque algo mas simple que en el caso de NetBeans. Básicamente, WebStorm utiliza el concepto de File Watcher para actualizar los cambios en los diferentes archivos.

Accede a File > Settings (o WebStorm > Preferences en Apple) y desde allí a Tools > File Watchers (no te preocupes si no te aparece ninguno de momento):



Pulsa en el icono + abajo a la izquierda y añade un nuevo Sass File Watcher con las siguientes opciones:



Repite los pasos anteriores para crear el SCSS File Watcher y el LESS File Watcher:





Nota: Comprueba en cada caso que en Program usas la ruta adecuada para cada uno de los pre-procesadores y, en la lista de File Watchers cambia en Level de Project a Global para que se aplique a todos los proyectos.


Configuración desde la Consola (modo stand-alone)

Por supuesto, es posible utilizar SASS y SCSS desde cualquier entorno de desarrollo sin necesidad de configurarlo, utilizando para ello comandos de Consola:

cd /ruta-hasta-mi-proyecto
sass sass/input.scss:sass/output.css /* para convertir un fichero sass en css en un momento dado */
sass scss/input.scss:scss/output.css /* para convertir un fichero scss en css en un momento dado */


cd /ruta-hasta-mi-proyecto
sass sass/input.scss:sass/output.css sass/input2.scss:sass/output2.css/* para convertir un fichero sass en css en un momento dado */
sass scss/input.scss:scss/output.css scss/input2.scss:scss/output2.css /* para convertir un fichero scss en css en un momento dado */


cd /ruta-hasta-mi-proyecto
sass --watch sass/input.scss:sass/output.css /* para convertir un fichero sass en css cada vez que haya cambios */
sass --watch scss/input.scss:scss/output.css /* para convertir un fichero scss en css cada vez que haya cambios */


cd /ruta-hasta-mi-proyecto
sass --watch sass:css /* para convertir todos los ficheros de la carpeta sass en css cada vez que haya cambios */
sass --watch scss:css /* para convertir todos los ficheros de la carpeta scss en css cada vez que haya cambios */


Además, es posible utilizar en la expresión una serie de opciones o flags que producirán diferentes resultados, siendo las más comunes:

  • --indented: indica que el fichero de entrada está indentado (Sass).
  • --no-indented: indica lo contrario, que no está indentado (SCSS).
  • --load-path=ruta-hasta-el-archivo: útil para cargar imports.
  • --style=expanded: genera un fichero de salida estándar (por defecto).
  • --style=compressed: genera un fichero de salida comprimido.
  • --no-charset: no emite el charset del fichero. Útil si utilizamos emojis o cualquier otro carácter no ASCII.
  • --update: solo se compilarán las hojas cuyas dependencias hayan cambiado recientemente y además generará un mensaje con ellas. Se diferencia de --watch en que solo lo hace una vez.
  • --no-source-map: no genera el mapa fuente, que es un fichero que permite en navegadores como Chrome y Firefox inspeccionar e incluso editar el archivo Sass o SCSS original.
  • --embed-sources: incluye el archivo Sass o SCSS original dentro del mapa fuente.
  • --embed-source-map: incluye el mapa fuente dentro del CSS generado en vez de crear un archivo aparte.
  • --poll: usado en combinación con --watch hace que se actualice la salida incluso más rápido.
  • --stop-on-error: para cuando encuentra un error y lo muestra. Muy útil si estamos compilando varios archivos a la vez.
  • --interactive: permite escribir expresiones SassScript en la consola y ver los resultados.
  • --color: emite colores en la ventana de la Consola para mejorar la visualización.
  • --no-unicode: solo se emitirán a la Consola caracteres ASCII.
  • --quiet: no emite warnings a la Consola durante la compilación.
  • --trace: emite a la Consola el stack trace completo de los errores que encuentre.
  • --help: muestra un resumen de la documentación en la Consola. Útil si no recordamos alguno de estos flags.


Referencias


Fecha de publicación: 15/04/2019
Asignaturas: aplicaciones webdiseño de interfaces web
Temas: css css3 sass scss less preprocesadores
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos