El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Usando CSS y SCSS en Ionic

Siguiente ►
►

Introducción

En este tema, aprenderemos cómo utilizar CSS y SCSS para estilizar nuestras aplicaciones Ionic. CSS (Cascading Style Sheets) es un lenguaje de diseño que se utiliza para describir la presentación de un documento escrito en HTML o XML. SCSS (Sassy CSS) es una extensión de CSS que permite el uso de variables, anidación, y otras características que hacen que la escritura de CSS sea más eficiente y manejable.

Contenidos

  1. Introducción a CSS y SCSS
  2. Configuración de SCSS en Ionic
  3. Variables y Mixins en SCSS
  4. Anidación y Herencia en SCSS
  5. Ejemplo Práctico
  6. Ejercicio Práctico

  1. Introducción a CSS y SCSS

CSS

CSS es el lenguaje utilizado para describir la presentación de un documento HTML. Permite aplicar estilos como colores, fuentes, espaciados, y más.

/* Ejemplo de CSS */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
}

SCSS

SCSS es una extensión de CSS que añade características como variables, anidación, y mixins, lo que facilita la escritura y el mantenimiento del código CSS.

/* Ejemplo de SCSS */
$primary-color: #333;

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;

  h1 {
    color: $primary-color;
  }
}

  1. Configuración de SCSS en Ionic

Ionic soporta SCSS de manera nativa, por lo que no es necesario realizar configuraciones adicionales. Simplemente puedes empezar a escribir tus estilos en archivos .scss.

Estructura de Archivos

En un proyecto Ionic, los archivos SCSS se encuentran generalmente en la carpeta src/theme/ y src/pages/.

src/
├── theme/
│   ├── variables.scss
│   └── global.scss
├── pages/
│   └── home/
│       └── home.scss

  1. Variables y Mixins en SCSS

Variables

Las variables en SCSS permiten almacenar valores que pueden ser reutilizados en todo el archivo.

$primary-color: #3498db;
$secondary-color: #2ecc71;

body {
  background-color: $primary-color;
  color: $secondary-color;
}

Mixins

Los mixins son bloques de código que pueden ser reutilizados en diferentes partes del archivo SCSS.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(10px);
  background-color: $primary-color;
  color: white;
}

  1. Anidación y Herencia en SCSS

Anidación

La anidación permite escribir CSS de manera más estructurada y legible.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
        color: $primary-color;
      }
    }
  }
}

Herencia

La herencia permite que un selector herede las propiedades de otro selector.

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: $secondary-color;
}

  1. Ejemplo Práctico

Vamos a crear un ejemplo práctico donde aplicaremos lo aprendido.

HTML

<ion-header>
  <ion-toolbar>
    <ion-title>
      Estilizando con SCSS
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="container">
    <h1>Bienvenido a Ionic</h1>
    <button class="button">Haz clic aquí</button>
  </div>
</ion-content>

SCSS

$primary-color: #3498db;
$secondary-color: #2ecc71;

.container {
  text-align: center;
  padding: 20px;

  h1 {
    color: $primary-color;
  }

  .button {
    @include border-radius(5px);
    background-color: $secondary-color;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;

    &:hover {
      background-color: darken($secondary-color, 10%);
    }
  }
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

  1. Ejercicio Práctico

Ejercicio

Crea una página en tu aplicación Ionic que tenga un formulario de contacto. Estiliza el formulario utilizando SCSS, aplicando variables, mixins, anidación y herencia.

Requisitos

  1. El formulario debe tener campos para nombre, correo electrónico y mensaje.
  2. Los campos deben tener un borde redondeado y un color de fondo claro.
  3. El botón de envío debe cambiar de color al pasar el cursor sobre él.

Solución

HTML

<ion-header>
  <ion-toolbar>
    <ion-title>
      Formulario de Contacto
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="contact-form">
    <form>
      <ion-item>
        <ion-label position="floating">Nombre</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label position="floating">Correo Electrónico</ion-label>
        <ion-input type="email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label position="floating">Mensaje</ion-label>
        <ion-textarea></ion-textarea>
      </ion-item>
      <ion-button expand="full" class="submit-button">Enviar</ion-button>
    </form>
  </div>
</ion-content>

SCSS

$input-bg-color: #f9f9f9;
$button-bg-color: #3498db;
$button-hover-color: darken($button-bg-color, 10%);

.contact-form {
  padding: 20px;

  ion-item {
    margin-bottom: 15px;

    ion-input,
    ion-textarea {
      background-color: $input-bg-color;
      @include border-radius(5px);
      padding: 10px;
    }
  }

  .submit-button {
    background-color: $button-bg-color;
    color: white;
    @include border-radius(5px);

    &:hover {
      background-color: $button-hover-color;
    }
  }
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

Conclusión

En este tema, hemos aprendido cómo utilizar CSS y SCSS para estilizar nuestras aplicaciones Ionic. Hemos cubierto conceptos básicos como variables, mixins, anidación y herencia en SCSS, y hemos aplicado estos conceptos en ejemplos prácticos. Con esta base, estarás preparado para crear aplicaciones Ionic visualmente atractivas y bien estructuradas.

En el próximo tema, exploraremos cómo tematizar tu aplicación Ionic para personalizar aún más su apariencia.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados