HOW TO USE SAAS MIXIN IN IONIC 4

Share the post

Hello All, In the last topic we had discussed How to use SAAS variables in the Ionic 4 application. Today, We move ahead & learn about mixin most important feature of SAAS. As discussed in the last tutorial, SAAS offers many features that make styling easier for the developer. In this topic, We will learn What is @mixin & @include in SAAS? How to implement SAAS mixin in the Ionic 4 application with the help of an example? How to pass arguments in mixin?

What is @mixin & @include in SAAS?

@mixin is one of the features offers by SAAS. With the help of @mixin, We can able to write a common CSS code & with the help of @include, We can able to include that mixin in our application. Now, We will learn How to use @mixin & @include in our Ionic 4 application.

How to use @mixin & @include in Ionic 4 application

Follow the below steps to use @mixin & @include in our Ionic application

1. Create a new Ionic 4 application

2. Write the below HTML code to your HTML page

<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>

3. Now, We will open variable.scss file & write below code

:root {
  /** common **/
  --ion-custom-background-color : RED;
}

In the above variable.scss file, We have created one variable for common background color.

4. Create a new file for mixin

Now, Open the theme folder & create a new file mixin.scss. This is our common mixin file where we kept the common CSS code. Write below code in mixin.scss file

@mixin common-header {
  background-color: var(--ion-custom-background-color);
}

to create mixin, We have to put @ before mixin. After that, We have to write the mixin name. Here, the common-header is our mixin name.

5. Write the below code on our page.scss file

@import "../../theme/mixin.scss";


.header-background {
    @include common-header;
}

.title-background {
  @include common-header;
}

To get the mixin code, We need to import the mixin.scss as shown in the above code & write @include the mixin name which used in mixin.scss page. Whatever code written in mixin can fetch directly inside our SCSS file. You no need to write common code again & again. Just write the common code in mixin.scss & include it in our SCSS file.

OUTPUT

Output
Output

We can also able to pass the arguments in the mixin. Now, We will see How to pass arguments in mixin?

How to pass arguments in mixin?

Our HTML code will remain the same. In our mixin.scss write below code

@mixin common-header-different-background($color-background) {
  background-color: $color-background;
}

The argument passed in mixin should pass with a $ sign. In the above code, We are passing a $color-background argument to the mixin. Now, Whatever value will pass to mixin is now applied to the background color. If you want to use a different color for the background then you just need to pass that color variable to mixin as an argument.

Create two new variables in variables.scss

:root {

  /** common **/

  --ion-custom-diff-background-color1: yellow;
  --ion-custom-diff-background-color2: brown;
}

Please write the below code on our page.scss

@import "../../theme/mixin.scss";



.header-background {
  @include common-header-different-background(var(--ion-custom-diff-background-color1));
}

.title-background {
@include common-header-different-background(var(--ion-custom-diff-background-color2));
}

As shown in the above code, We can able to apply different background-color with the help of arguments in the mixin.

OUTPUT

Output
Output

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

Leave a Comment