SASS Additional CSS variables

ionic-v1
1

I am using the SASS method to style my Ionic app.

On can achieve this by modifying the variables stored in sass/_variables.sass.

For a specific button, I now want to change to color of the text when active. However, with the default setup, it is only possible to change the background color on active. For instance, you will find:

$button-light-bg:                 $light !default;
$button-light-text:               #fff !default;
$button-light-border:             rgba(255,255,255, 0) !default;
$button-light-active-bg:          $light !default;
$button-light-active-border:      $light !default;

How do I add an additional variable to change the text color to black? For instance:

$button-light-active-text:        #000 !default; // does not work
2

Are you changing the variables in the ionic lib directory? You should not do this but instead make the changes in the ./scss/ionic.app.scss

3

Yes, I was doing it in the lib directory. But don’t I declare it then double? How does Ionic know which variables to take?

4

A bit of an older video, but this gets the point across

http://learn.ionicframework.com/videos/sass/

5

Thanks for that, will have a look. But if I want to change the color of the button text when active, is this also something I do not should do in the library?

6

Right, anything you want to customize should be done in the ionic.app.scss file, and not in the lib.
If you modify anything in the lib, when you go to update, they’ll get replaced