Как создать условный импорт с помощью sass? - PullRequest
Новая
       40

Как создать условный импорт с помощью sass?

0 голосов
/ 22 октября 2018

Я реализую концепцию перевода на веб-сайте bootstrap (на английском, арабском).

Я изменяю html-тег "dir" атрибут на "rlt" для изменения направления сайта.Но это не влияет на направления Boostrap (поля, интервалы и другие ...).Поэтому я использую загрузочную версию RTL для обработки последнего.Прямо сейчас я переключаюсь между двумя версиями начальной загрузки, используя Усы . 

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

Код выше работает хорошо!

Теперь, что если мне нужносоздать свою собственную тему, переопределив цвета Boostrap и другие?

Здесь одна из лучших практик для переопределения начальной загрузки с использованием концепции расширения sass.

Если я собираюсь применить упомянутую концепцию, я будув проблеме. 

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

Итак, мой вопрос: как создать условный @import, используя sass, в зависимости от языка сайта?(направление html).

Спасибо.

1 Ответ

0 голосов
/ 22 октября 2018

Если вы хотите обработать это с помощью Sass, вы можете выполнить следующее: 

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

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

Этот метод работает, но сгенерирует предварительный селектор HTML для каждого из ваших правил,что повлияет на вес файла.

...