El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Utilitzant CSS i SCSS en Ionic

Següent ►
►

En aquest tema, aprendrem com utilitzar CSS i SCSS per estilitzar les nostres aplicacions Ionic. CSS (Cascading Style Sheets) és un llenguatge utilitzat per descriure la presentació d'un document escrit en HTML o XML. SCSS (Sassy CSS) és una extensió de CSS que afegeix potents característiques com variables, mixins, i anidament, facilitant l'escriptura i manteniment del codi CSS.

Continguts

  1. Introducció a CSS i SCSS
  2. Estructura de Fitxers CSS i SCSS en Ionic
  3. Variables i Mixins en SCSS
  4. Anidament i Herència en SCSS
  5. Exemples Pràctics
  6. Exercicis Pràctics

Introducció a CSS i SCSS

CSS

CSS és un llenguatge de fulls d'estil que permet aplicar estils als elements HTML. A continuació es mostra un exemple bàsic de CSS:

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

h1 {
  color: #333;
  text-align: center;
}

SCSS

SCSS és una extensió de CSS que afegeix característiques com variables, anidament, i mixins. Aquí teniu un exemple bàsic de SCSS:

$primary-color: #333;
$background-color: #f0f0f0;

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

  h1 {
    color: $primary-color;
    text-align: center;
  }
}

Estructura de Fitxers CSS i SCSS en Ionic

En un projecte Ionic, els fitxers CSS i SCSS es troben normalment a la carpeta src/theme i a les carpetes de components o pàgines específiques. La configuració per defecte d'Ionic utilitza SCSS, però també podeu utilitzar CSS si ho preferiu.

Exemple d'Estructura de Fitxers

src/
├── theme/
│   ├── variables.scss
│   └── global.scss
├── app/
│   ├── app.component.scss
│   └── app.component.html
├── pages/
│   ├── home/
│   │   ├── home.page.scss
│   │   └── home.page.html
│   └── about/
│       ├── about.page.scss
│       └── about.page.html

Variables i Mixins en SCSS

Variables

Les variables en SCSS permeten definir valors reutilitzables. Això és especialment útil per mantenir la consistència en els colors, mides, i altres propietats.

$primary-color: #3880ff;
$secondary-color: #3dc2ff;

button {
  background-color: $primary-color;
  color: white;
}

Mixins

Els mixins són blocs de codi reutilitzables que es poden incloure en altres regles CSS. Això ajuda a evitar la duplicació de codi.

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include center;
  height: 100vh;
}

Anidament i Herència en SCSS

Anidament

L'anidament permet escriure regles CSS de manera més jeràrquica i llegible.

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

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

Herència

L'herència permet que un selector hereti les propietats d'un altre selector.

%message {
  padding: 10px;
  border: 1px solid #ccc;
}

.success {
  @extend %message;
  border-color: green;
}

.error {
  @extend %message;
  border-color: red;
}

Exemples Pràctics

Exemple 1: Estilitzant un Botó

button {
  background-color: $primary-color;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;

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

Exemple 2: Estilitzant una Pàgina

.page-home {
  .header {
    background-color: $secondary-color;
    padding: 20px;
    text-align: center;
    color: white;
  }

  .content {
    padding: 20px;

    p {
      font-size: 18px;
      line-height: 1.5;
    }
  }
}

Exercicis Pràctics

Exercici 1: Estilitzar una Targeta

Crea una targeta amb SCSS que tingui un títol, una imatge i una descripció. Utilitza variables i mixins per mantenir el codi organitzat.

Solució

$card-background: #fff;
$card-border: #ddd;
$card-padding: 20px;

@mixin card {
  background-color: $card-background;
  border: 1px solid $card-border;
  border-radius: 4px;
  padding: $card-padding;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card {
  @include card;

  .card-title {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .card-image {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }

  .card-description {
    font-size: 16px;
    color: #666;
  }
}

Exercici 2: Crear un Layout Responsiu

Crea un layout responsiu amb SCSS que tingui una barra lateral i un contingut principal. La barra lateral ha de ser visible en pantalles grans i amagar-se en pantalles petites.

Solució

$sidebar-width: 250px;
$breakpoint: 768px;

.layout {
  display: flex;

  .sidebar {
    width: $sidebar-width;
    background-color: $primary-color;
    color: white;
    padding: 20px;

    @media (max-width: $breakpoint) {
      display: none;
    }
  }

  .content {
    flex: 1;
    padding: 20px;
  }
}

Conclusió

En aquest tema, hem après com utilitzar CSS i SCSS per estilitzar les nostres aplicacions Ionic. Hem vist com estructurar els fitxers CSS i SCSS, utilitzar variables i mixins, i aplicar anidament i herència en SCSS. També hem treballat amb exemples pràctics i exercicis per reforçar els conceptes apresos. Amb aquests coneixements, estàs preparat per crear aplicacions Ionic amb estils personalitzats i mantenibles.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats