Тематика в Angular 7 с пользовательскими свойствами CSS и SASS - PullRequest
Новая
       24

Тематика в Angular 7 с пользовательскими свойствами CSS и SASS

0 голосов
/ 15 ноября 2018

Я работаю над приложением, которое использует пользовательские свойства CSS с SASS для реализации их тем, и оно должно работать в IE 11. Я посмотрел на эту библиотеку , но не могу понять, как настроить его правильно.

У меня есть приложение Angular, и мы переключаем темы с помощью селекторов классов на :root body. Темы содержат переменные. Код отлично работает в Chrome и др., Но не работает в IE 11. Какие шаги нужно предпринять, чтобы библиотека сделала свое волшебство и исправила мой CSS? Я знаю, что есть много документации по методу cssVars(), и я просмотрел все зависимые проекты; но я все еще не могу заставить его работать!

Я использую следующий формат для моих переменных: 

$variables: (
  --box-shadow-color: var(--box-shadow-color),
  --page-background-color: var(--page-background-color),
}

и присвоение им значений по умолчанию: 

:root body {
  --box-shadow-color: rgba(0, 0, 0, 0.03);
  --page-background-color: #{$light-grey};
}

, а затем поменять их местами с помощью классов: 

:root body.theme-johnlewis {
  --box-shadow-color: rgba(0, 0, 0, 0.03);
  --page-background-color: #{$color-red};
}

Это правильный формат для использования?

1 Ответ

0 голосов
/ 17 ноября 2018

Вы уже используете sass, пусть он обрабатывает это для вас при компиляции, используя sass vars вместо css vars, так как в этом случае polyfill довольно избыточен.

Лично в структуре я делаю, чтобы 2 файла были источником правды для всех остальных с sass vars. Один специально для цветов, другой специально для всего остального и не содержит ничего, кроме переменных в файлах, поэтому, когда вы @import добавляете их в другие файлы sass, он просто берет необходимые переменные и не дублирует какие-либо классы CSS. Подобно тому, как большинство более популярных фреймворков приняли как Переменные Bootstrap 4s настройки.

Как пример; 

--box-shadow-color: rgba(0, 0, 0, 0.03);

станет; 

$box-shadow-color: rgba(0, 0, 0, 0.03);

и используется как; 

css selector {
   box-shadow: 3px 3px 10px $box-shadow-color;
}

или может установить все значение таким же образом, одновременно наследуя цвет; 

$my-standardized-box-shadow: 3px 3px 10px $box-shadow-color;

и используется как; 

css selector {
   box-shadow: $my-standardized-box-shadow;
}

Этот способ также полезен тем, что пользовательский агент не заботится о том, чтобы иметь дело с этими исходными переменными css в init, потому что sass сделал всю работу за вас еще до того, как сгенерировал ваш css. В любом случае, надеюсь, это поможет, ура.

...