Best practice for adding new css

ionic-v1
1

Hello!

We are starting a new Ionic project that will need quite a bit of new css code based on the first designs we have received from the designers.

We will have to create new css code for custom cards, lists, items, inputs… We’d like to add all this css code in scss format for better maintenance and we’d like to know which would be the best approach to add all this new code to the existing Ionic scss files.

We were thinking about creating new scss files for new custom css code, e.g. _list_custom.scss, _items_custom.scss etc.

But what about modifying Ionics scss code, for example, the variables.scss? Is it a good idea to make changes directly in the original Ionic file or it’s better to create a new file to override the original scss?

We would like our new code to have the least impact in future version upgrades.

thanks & regards

1 Like
2

Checkout this video made by Ionic: http://learn.ionicframework.com/videos/sass/

As best practice you do not want to alter Ionic’s own scss. Instead import in your own and override what you want.
They state that as best practice you want to:

  1. Create a custom scss file in your www/css/scss/ionic.app.scss
  2. import Ionic’s scss in your own scss
  3. Override default variables if necessary (above the Ionic import)
  4. Add custom scss
  5. ‘Watch’ your ionic.app.scss file with sass
  6. Delete Ionic css reference from index.html and add reference to app.css

Your custom scss file could look like this:

// Colors
// -------------------------------

// Overwrite default Ionic colors to custom colors
$stable:                          #0078C9 !default;
$positive:                        #00539F !default;
$calm:                            #0089CF !default;

// Fix ionicons path
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Import Ionic scss
@import "../../lib/ionic/scss/ionic.scss";

// Import custom styles
// -------------------------------

// Lists
@import listcustom.scss";
// Items
@import "itemscustom.scss";
// etc.

Command line:

sass --watch www/css/scss/ionic.app.scss:www/css/app.css
1 Like
3

In my humble opinion it is never a good idea to change the files of the framework You are using. The results might be very unexpected. Writing Your own scss is a much better choice.
As far as impact goes: once the scss files are compiled, minified, etc., they don’t have a big influence on the weight of the application.

4

This answer is very late however I stumbled upon this after many other failed attempts and google searches and think I came up with a clean solution - I’m very new to Ionic and if this is frowned upon, speak up!

I created a _tester.scss file and dropped it inside of www/lib/ionic/scss/. Inside the file i wrote the custom css that I needed

    .commercial-score{
	background-color: 	#F05A28;
}

Afterwards, added the filename _tester.scss to the ionic.scss in the same directory, including a new line at the end of the file

  //custom
  "tester";

I then saw the changes being added in the ionic serve command.

Lastly, I added the following and it worked beautifully.

<ion-header-bar class="commercial-score"></ion-header-bar>

This was done after running the ionic setup sass, which changed the index.html to load the compiled output of ionic.app.css. Nonetheless, the ionic.app.css file looks into the www/…/scss/ionic which then imports all of its CSS - so by adding a new file and including it in the import of the ionic.scss file, the new CSS is available to use!

Hope this helps any other stumblers!

5

And, if you use ‘generator-ionic’: http://robferguson.org/2015/07/07/customising-ionic-with-sass/

Ref: http://robferguson.org/2015/07/06/ionic-angular-and-cordova/