The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Using CSS and SCSS in Ionic

Next ►
►

In this section, we will explore how to use CSS and SCSS to style your Ionic applications. We will cover the basics of CSS and SCSS, how to integrate them into your Ionic project, and some practical examples to get you started.

Table of Contents

  1. Introduction to CSS and SCSS
  2. Integrating CSS and SCSS in Ionic
  3. Practical Examples
  4. Exercises
  5. Summary

Introduction to CSS and SCSS

CSS (Cascading Style Sheets)

CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

Key Concepts:

  • Selectors: Used to target HTML elements.
  • Properties and Values: Define the styles to be applied to the selected elements.
  • Cascading and Specificity: Determine which styles are applied when multiple rules match the same element.

SCSS (Sassy CSS)

SCSS is a syntax of Sass (Syntactically Awesome Stylesheets), which is a preprocessor scripting language that is interpreted or compiled into CSS. SCSS extends CSS with features like variables, nested rules, and mixins.

Key Features:

  • Variables: Store reusable values.
  • Nesting: Nest CSS selectors in a way that follows the same visual hierarchy of HTML.
  • Partials and Imports: Split CSS into smaller, reusable files.
  • Mixins: Create reusable chunks of CSS.
  • Inheritance: Share a set of CSS properties from one selector to another.

Integrating CSS and SCSS in Ionic

Setting Up SCSS in Ionic

Ionic projects are set up to use SCSS by default. You can find the main SCSS file in the src/theme/variables.scss file. You can also create additional SCSS files and import them as needed.

Using CSS in Ionic

You can add CSS directly to your components or global styles. For component-specific styles, you can use the styleUrls property in the component decorator.

Example:

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {
  // Component logic
}

Using SCSS in Ionic

SCSS files can be imported into your main SCSS file or used directly in components.

Example:

// src/theme/variables.scss
$primary-color: #3880ff;
$secondary-color: #3dc2ff;

Practical Examples

Example 1: Styling a Button with CSS

HTML:

<button class="custom-button">Click Me</button>

CSS:

.custom-button {
  background-color: #3880ff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.custom-button:hover {
  background-color: #3dc2ff;
}

Example 2: Using SCSS Variables and Nesting

SCSS:

// src/theme/variables.scss
$primary-color: #3880ff;
$secondary-color: #3dc2ff;

// src/pages/home/home.page.scss
.custom-button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

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

Exercises

Exercise 1: Create a Custom Card Component

  1. Create a new component called custom-card.
  2. Add HTML to display a card with a title and content.
  3. Use CSS or SCSS to style the card with a border, padding, and background color.

Solution: HTML:

<ion-card class="custom-card">
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    This is the card content.
  </ion-card-content>
</ion-card>

SCSS:

.custom-card {
  border: 1px solid #ccc;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
}

Exercise 2: Use SCSS Mixins

  1. Create a mixin for a button style.
  2. Apply the mixin to multiple buttons with different colors.

Solution: SCSS:

@mixin button-style($bg-color) {
  background-color: $bg-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

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

.button-primary {
  @include button-style(#3880ff);
}

.button-secondary {
  @include button-style(#3dc2ff);
}

HTML:

<button class="button-primary">Primary Button</button>
<button class="button-secondary">Secondary Button</button>

Summary

In this section, we covered the basics of using CSS and SCSS in Ionic. We learned how to integrate CSS and SCSS into our Ionic projects, explored practical examples, and completed exercises to reinforce our understanding. By mastering CSS and SCSS, you can create visually appealing and maintainable styles for your Ionic applications.

Next, we will dive into theming your Ionic app, where we will learn how to customize the look and feel of your application using Ionic's powerful theming capabilities.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved