How to customize Chartist.js for multiple graphs with different styles?

Question

Foreword: New to Sass, better with Less but not great either.

I'm using chartist to plot a line plot and a pie chart in two seperate views. Chartist provides a _chartist-settings.scss file which contains a bunch of global constants definitions. The documentations says to alter these in order to customize the look of the chart. However, I'd like each chart to have its own styling, but I'm not sure the way I'm doing it right now in the SCSS is correct.

Let's use the example of the chart's label font-size. in the file, this is set using the $ct-text-size variable.

Ideally, I would define values for these constants which would change according to the scope of the chart. So the chart under <div class="line"> I can have $ct-text-size: 2rem and under <div class="pie"> have $ct-text-size: 1rem. However, I can't figure out how to do this. Is there a way to do this?

Instead, to make it work, I've looked at the class these constants end up getting used in (in this case .ct-label) and changed them directly according to scope (See below). This however, seems to go against the abstraction that _chartist-settings.scss provides, since it couples it with the internal SCSS workings of the module.

.line{
  .ct-label { //this class uses the $ct-text-size variable
    font-size: 1rem; // but I just change the class directly
  }
}

.pie{
  .ct-label {
    font-size: 2rem;
  }
}