Empezar a utilizar Sass en un proyecto IONIC Cordova

Como Bootstrap o muchos otros frameworks, Ionic viene ya con SASS. Estos frameworks para utilizar CSS de manera avanzada, con herramientas de programación, cada vez son más presentes y permeables. En este pequeño artículo vamos a echar un vistazo a la presencia de SASS en Ionic.

Instalación de SASS

Instalamos SASS en nuestro sistema, para que Ionic pueda utilizarlo.

Uso de SASS en Ionic

En cuanto a Ionic y CSS, podemos utilizar directamente el css vacío (/* Empty. Add your own CSS if you like */) que nos aparece en:

nombre_app\www\css\style.css

O podemos trabajar con Sass directamente, que es el que va a generar el css final. Este css final generado por Ionic lo encontramos en:

nombre_app\www\css\ionic.app.css

Para sobrescribir las variables de estilo de scss no vamos directamente a los scss sino que los sobrescribimos en los archivos del directorio nombre_app\scss, que terminan todos unidos en:

nombre_app\www\lib\ionic\scss\ionic.scss

Por ejemplo, si abrimos el fichero:

nombre_app\www\lib\ionic\scss\_variables.scss

podremos en él cambiar variables globales, y empezaremos a disfrutar de poder progamar, o por lo menos acercarnos más a lo que es programar, en CSS.

IMPORTANTE: si queremos trabajar directamente con sass en la compilación de la app en tiempo real, debemos hacer un gulp sass;

gulp sass

Declarando SASS en la página index.html

En la página index.html declararemos nuestro CSS de una manera u otra dependiendo de si queremos escribir directamente css o de si queremos trabajar directamente con SASS.

Así, en el HEAD, debemos escribir:

Si no utilizamos sass:

<link href=“lib/ionic/css/ionic.css” rel=“stylesheet”>

<link href=“css/style.css” rel=“stylesheet”>

Si utilizamos sass:

<link href=”css/ionic.app.css” rel=”stylesheet”>

 

One thought on “Empezar a utilizar Sass en un proyecto IONIC Cordova

  1. Yo agregaría;

    Si se está utlizando un IDE como por ejemplo Netbeans, se puede ejecutar consola aparte:

    > gulp whatch

    Con ésto se monitoría cualquier cambio que se realice sobre los archivos de la carpeta ./scss en caso de que sean modificados desde el IDE, sin tener que instalar sass y configurarlo aparte

Leave a Reply