Personalizando mi aplicación Ionic con Sass

Hola a todos.
Con este artículo vamos a terminar con una serie de posts sobre como crear una aplicación híbrida con Ionic y Firebase como tu backend en la que hemos visto cómo configurar nuestra aplicación con servicio de autenticación contra un servidor Firebase, y como personalizarla utilizando los estilos proporcionados por Ionic.

Si has leido mi artículo Personalizando mi aplicación Ionic, en él, comenzamos a modificar el estilo de la aplicación utilizando los estilos proporcionados por Ionic. Pero …

¿Qué pasa si quieres modificar tus propios estilos con tus colores corporativos, fuentes etc…?

Pues bien, si lo que queremos es crear nuestros propios estilos, debemos editarlos con Sass. Te dejo mi artículo sobre Cómo instalar Sass si aún no lo has instalado donde te doy unos primeros pasos para empezara a utilizarlo.

Para comenzar descárgate la aplicación en https://github.com/cookyourweb/Ionic-Firebase-Starter-App-Changed-Styles y sigue las instrucciones de instalación.

Configuarndo la aplicación para Sass

Una vez creada nuestra aplicación, abre un terminal en modo administrador y sitúate dentro del directorio.
En mi caso, mi aplicación se llama myIonicFirebaseAppSass.
Introduce la siguiente instrucción

ionic setup sass
Ionic Setup Sass

Ionic Setup Sass

A continuación, abre el directorio con tu editor favorito, yo en mi caso utilizaré brackets.

Abre tu aplicación como un proyecto y busca el archivo gulpfile.js

Abre tu aplicación como un proyecto y busca el archivo gulpfile.js


Busca el archivo gulpfile.js y añade la siguiente linea para que esté a la escucha de cualquier cambio

gulp.task('serve:before', ['default','watch']);
Inserta la instrucción para que esté a la escucha de los cambios

Inserta la instrucción para que esté a la escucha de los cambios

Perfecto. Ahora ya tenemos configurado nuestra aplicación ionic para que escuche los cambios. Abre el terminal de nuevo e inserta la siguiente instrucción.

ionic serve

Ahora en tu terminal, deberías ver lo siguiente, para saber que cualquier modificación que realices , se cambiará automáticamente tanto en tu css coom en el navegador:

Escuchando -sass

Escuchando Sass

Ahora vamos a modificar los estilos y verás como automáticamente los podras ver como si simplemente hubieras modificado el css.

Edita_variables.scss

Edita_variables.scss


Abre _variables.css y vamos a cambiar el color de energized que es el que tengo por defecto para la cabecera y el botón del login.
El resultado quedaría:
Cambiado el color de la cabecera y el botón

Cambiado el color de la cabecera y el botón

Espero que esta breve introducción te haya servido para ayudarte a la hora de modificar los estilos.

Fijate que Ionic nos ha proporcionado todos los archivos scss y los importa en la scss principal, de tal forma que nos facilita mucho el desarrollo de estas páginas. Por ejemplo, al igual que teníamos la página de _variables.scss, tenemos botones, animaciones, iconos etc que son importadas a ionic.scss que es la que compila a ionic.css que es interpretado por el navegador.

Ionic.scss importa todas los estilos contenidos en el directorio

Ionic.scss importa todas los estilos contenidos en el directorio. Por ejemplo “Button” en realidad es _Button.scss

Ionic separa de una forma muy ordenada y facil de administrar todos los elementos para que a la hora de modificarlos sea rápido y limpio.

Importado dentro del scss principal

Importado dentro del scss principal

Eso es todo, ya teneis los conocimientos básicos para comenzar a utilizar Sass en vuestra aplicación Ionic. Ten en cuenta que Sass es un lenguaje de programación en toda regla, aprende a utilizarlo, te facilitará mucho tu trabajo como desarrollador

Verónica Serna| Cookyourweb

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *