Search code examples
javascripthtmlcsssassgulp

How to create conditional import using sass?

I'm implementing the translation concept in a bootstrap website (Engish, Arabic).

I'm changing the html tag "dir" attribute to "rlt" in order to change the website direction. But that doesn't affect the boostrap directions (margins, spacing and other ...). So I'm using the bootstrap rtl version to handle the last. Right now, I'm switching between the two bootstrap version using Mustache.

${{#index.isEnglish}}$
<link rel="stylesheet" href="../../css/bootstrap.css">
${{/index.isEnglish}}$
${{^index.isEnglish}}$
<link rel="stylesheet" href="../../css/bootstrap.ar.css">
${{/index.isEnglish}}$

The code above the is working well!

Now, what if I need to create my own theme by overriding the boostrap colors and other?

Here one of the best practices to override the bootstrap using the sass extending concept.

If I gonna apply the mentioned concept I will be in a problem.

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap-v4-rtl/scss/bootstrap-rtl";

So my question is how to create conditional @import using sass depending on the website language? (html direction).

Thanks.

Solution

  • If you want to handle this using Sass, you could proceed as follow:

    html[dir='rtl'] {
  @import "node_modules/bootstrap-v4-rtl/scss/bootstrap-rtl";
}

html[dir='ltr'] {
  @import "node_modules/bootstrap/scss/bootstrap";
}

    This method works but will generate an html pre-selector for each of your rules, which will have an impact on the weight of the file.