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 scss now.
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";
Should be:
// 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 $button-positive-active-text inside _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.
