CODEWITHSUNDEEP
javascriptcssangularjssassangular-translate
Mohamed Qassim
Mohamed Qassim

Reputation: 37

How change import scss based on current selected language with Angular

I'm using angular-translate in my Angular application.

And I want to change the importing scss files based on the current selected languge

@import 'partials/reset';
@import 'partials/variables_ar';     <--------- OR
@import 'partials/variables_en';     <--------- Based on  $translate.use();
@import 'partials/mixins';
@import 'partials/angular-material-extend';
@import 'partials/layouts-template';
@import 'partials/layouts-page';
@import 'partials/animations';
@import 'partials/colors';
@import 'partials/icons';

Upvotes: 0

Views: 975

Answers (1)

Max Mumford
Max Mumford

Reputation: 2642

Since SASS is built at compile time, not run time, you can't achieve what you're trying to do that way.

I think the best approach for you is to change the class based on the user's selected language, and then style your webapp depending on that class. For example your HTML:

<body class="{{ languageCode }}">
  <header>My Header</header>
</body>

and your SCSS:

body.en {
  header { color: blue; }
}

body.fr { 
  header { color: red; }
}

Upvotes: 1

Related Questions