How to change the colour of the text of an active button using SASS in Ionic?

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 (when clicked on). However, with the default setup, it is only possible to change the background color of the button when clicked on in the Ionic Setup. 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 in Ionic to change the text color to black? For instance:

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

Now, this button needs to be used somewhere? Where in the Ionic Library can I modify this?

You could add an extra button.scss file and link this file in ionic.app.scss file with @import "pathTo/button.scss"

Now in your button.scss you could write:

.button.button-light.active, .button.button-light.activated {
  color : #000
}

or with a variable:

.button.button-light.active, .button.button-light.activated {
  color : $button-light-active-text
}

And add this in ionic.app.scss $button-light-active-text #000

The !deafult is not necessary. It only means: use this value if no value was set before to the property