HOW TO USE SAAS VARIABLES IN IONIC 4

Share the post

Hello All, In the last tutorial, We had discussed How to use fonts in the Ionic 4 application. Now, In this tutorial, We will discuss How to use SAAS variables in Ionic 4. But, before we proceed, Let’s understand What is SAAS? What is the use of SAAS variables in the Ionic 4 application? We will also see the difference between SCSS & SAAS.

What is SAAS?

SAAS stands for Syntactically Awesome Style Sheet. In simple words, You can say that SAAS is the modern CSS. With the help of SAAS, You can actually apply better & fast styling to Ionic applications. It allows using variable, function, mixins & nested rules in CSS. Yes! You heard correct.

What is the use of SAAS in the Ionic application?

SAAS offers to use variables in CSS. So, It’s much easier to style our Ionic application with the help of these things. For example, If you want to apply a background theme to an Ionic application with RED color. But, Before go live your client says that they don’t want RED color as background theme & instead of RED they want YELLOW color. Now, If you are using old techniques of CSS then you must want to change every page of background color to YELLOW. But, If you are using SAAS in your application & you are using a variable to declare background color as RED, then you just need to change the variable value to YELLOW. In Just a few minutes you can able to change the background theme to YELLOW of your application. So, that’s the power of SAAS.

How to use SAAS variables in Ionic 4

If you go to the variable.scss file, SAAS variable will look like this in an Ionic application

--ion-custom-background-color : #777777;

Now, If we want to use this common background color in our page for two elements, then we will apply this background color to our page.scss as follows

.header-background {
    background-color: var(--ion-custom-background-color);
}

.title-background {
  background-color: var(--ion-custom-background-color);
}

Now, apply above classes to our HTML title & header as follows

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title class="title-background">
      Ionic List Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">


  <ion-item>
    <ion-label>
      <h2 class="header-background"> HTML TO PDF </h2>
    </ion-label>
  </ion-item>

</ion-content>

Output

Output
Output

Now, if we want to change this background color with RED, then simply change in variable.scss as follows

--ion-custom-background-color : RED;

Output

change_color_output
RED color output

What is the difference between SCSS & SAAS?

=> SCSS :

  • It stands for Sassy Cascading Style Sheet
  • This is one of the ways of SAAS syntax
  • The SCSS file extended by .scss
  • It uses brackets

=> SAAS

  • It stands for Syntactically Awesome Style Sheet
  • SAAS can be represented by two syntaxes: SCSS & INDENTED Syntax
  • The SAAS file extended by .saas
  • It does not use brackets

1 thought on “HOW TO USE SAAS VARIABLES IN IONIC 4”

Leave a Comment