I’d like to document my process here, so please feel to point out anything I’m doing wrong.
I first read Customizing Ionic with sass, I believe some parts of it are not 100% up to date, but I figured ways around those barriers. Here is what I ran into:
The structure for a new project is not quite like this, and the mismatched names are confusing. Here is what is on the page:
- my_app - hooks - plugins - scss - www - css - fonts - js - lib - ionic - css - js - sass - templates
The only difference here is that the
sass folder inside
www/lib/ionic/ is actually called
The second and more irritating issue was getting sass to “watch” my file once set up. The
ionic.app.scss file was placed into the
scss/ dir and inside the file the import line:
// Include all of Ionic @import "www/lib/ionic/scss/ionic";
// Include all of Ionic @import "../www/lib/ionic/scss/ionic";
To proceed without errors when running the command
sass --watch scss/ionic.app.scss:www/css/app.css from the top dir.
Anyways I’m new to scss/sass and I’d like to add my own customization, but the article also mentions to not alter the
_foo files if you can help it, and only alter your
ionic.app.scss file to override things. Well, I’d like to add my own custom variables and change things in my app all around but I’m not sure how…
As an example I will use the buttons inside a header bar, because that’s something I’d like to customize even further than the defaults allow. In my example I’d like to change the appearance of the
positive series of buttons inside the header bar when they are tapped. Currently in the
_variables.scss file, I have the following properties to modify:
$button-positive-bg: $positive !default; $button-positive-text: #fff !default; $button-positive-border: darken($positive, 15%) !default; $button-positive-active-bg: darken($positive, 15%) !default; $button-positive-active-border: darken($positive, 15%) !default;
But I’d like the change the color of the text when the button is active as well, which means I need to add a
active-text in there somewhere. So how do I go about adding a new variable to this stuff?
Do I want to make a variable called
_variables.scss? If I do that, do I need to modify
_bars.scss as well or some other
_foo file? If I add the variables to all these files, do I have to worry about the mapping? How does sass now know what’s going on once I change these files?
An article on doing full customization would be amazing of course, I’d even be happy to write a post, but any help appreciated.