Ionic 4: Time to Tidy up Your SCSS

Your project CSS is a mess. You know it. I know it. Anyone that looks at your code can see that you have the same CSS copy pasted in multiple files, under a multitude of class names, doing the same thing. Well, I’m here to help get your life back in order — at least within your Ionic 4 project. This is best done in a new project, as it’s easier to build upon it, and doesn’t require any searching on your end, but if you have a large, unmanageable project at this point, keep reading. This just might take a little bit more effort on your part.

What are the benefits of this?

1. Smaller bundle sizes.
2. Easier to make app-wide design changes.
3. You don’t have to consult the documentation every time to make simple changes.
4. You don’t have to copy-paste CSS everywhere in your app.
5. It makes you look like you know what you’re doing.

Alright. First things first. We need to go back to the basics of DRY programming. If you’re not familiar with DRY programming, it’s time to learn. DRY stands for Don’t Repeat Yourself, and it is a huge issue that people seem to have when their app grows larger and larger.

In your projects src/theme folder, I want you to create a folder called common which will house all of our common CSS classes, for every ionic-component that we customize. Each component will have it’s own individual .scss file, named after it’s component. So we’ll have one called ion-item.scss for example, if you have customizations for the ion-item component. This can be something as simple as the following:

ion-item.scss

ion-item.no-border {
  --border-color: transparent;
}

This class makes it so that the ion-item doesn’t have a border because it sets --border-color CSS variable as transparent.

As you can see, I’ve made sure to add the class to the ion-item component within my class declaration, so that it only targets ion-items with that particular class. Keep the classes small, and reusable. You don’t want a lot of bloat within these classes unless you’re going to be using that class app-wide. I prefer smaller classes when possible.

Another example of this is if you have an ion-list where you don’t want the bottom list item to have a border. Instead of writing this logic everywhere, you can just write it once in the ion-list.scss file, and never again have to worry about what CSS you need to target to accomplish this. All you need is the class name added to your ion-list.

<ion-list class="no-last-border">...</ion-list>

ion-list.scss

ion-list.no-last-border {
  :last-child {
    --border-style: none !important;
  }
}

Lastly, I’m gonna ask that you do a little bit more organization and create a file called theme/common/common.scss which will pass these DRY files to your global.scss file, so that they can be used throughout your app.

Within common.scss you’ll import the individual files like so:

common.scss

@import 'ion-modal';
@import 'ion-item';
@import 'ion-list';
@import 'ion-content';
@import 'ion-card';
@import 'ion-avatar';
@import 'ion-button';
@import 'ion-toolbar';
@import 'ion-alert';
@import 'ion-img';
@import 'ion-toast';
@import 'ion-segment';
@import 'ion-fab-button';
@import 'ion-text-area';

global.scss

Lastly, in your src/global.scss file, you’ll import the file we created above.

@import './theme/common/common';

And that’s it! You’re now on the road to creating reusable, but DRY SCSS for your Ionic 4 app. If you’re on an existing app, it’ll take a bit more effort to comb through files and remove duplicate code, as I mentioned earlier, but it will pay off in the end. Check out some of my other articles for more useful solutions within the Ionic framework.

Questions?

You can find me on:
- GitHub: https://github.com/bengejd/
- Medium: https://medium.com/@JordanBenge

Who am I? My name is Jordan Benge, I am a Software Developer who loves helping others and contributing to Open-Source. I’ve been working in the Ionic Framework since Ionic 1, and have tried to keep up to date on the latest and greatest when it comes to Hybrid Mobile App Development.

If you enjoyed this story, please click the 👏 button and share to help others find it! Feel free to leave a comment below if you need any help.