Как использовать Sass, чтобы дать пользователям несколько вариантов темы - PullRequest
Новая
       21

Как использовать Sass, чтобы дать пользователям несколько вариантов темы

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

Я пытаюсь предоставить несколько тем для веб-сайта.Я знаю, как использовать sass.Насколько я понимаю, шаги похожи на следующие.

  1. создание файла sass.
  2. файл sass предварительно обработан.
  3. создан соответствующий файл css

Это означает, чтофайл css уже правильно написан (либо через sass, либо через прямой css) и используется в html-файле.Но я хочу реализовать то, что есть опция, позволяющая пользователям использовать тему.Независимо от темы, по которой щелкает пользователь, вновь выбранная тема немедленно применяется на странице html.Как я могу добиться этого с помощью sass?Не могли бы вы дать мне некоторое представление об этом, если у вас есть такой опыт?

Ответы [ 2 ]

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

Вы можете использовать переменные CSS .Не работает на IE = (Но так удивительно! 

/* Common css */
p {
  color: var(--color);
  font-size: var(--font-size);
  font-family: var(--font-family);
}
<p>Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.</p>

<!--Theme A variables-->
<style>
  :root {
    --color: red;
    --font-size: 20px;
    --font-family: sans-serif;
  }
</style>

<!--Theme B variables-->
<!--style>
  :root {
    --color: green;
    --font-size: 14px;
    --font-family: serif;
  }
</style-->
0 голосов
/ 23 октября 2018

Есть несколько разных способов, но один из вариантов - иметь родительские классы для каждой из тем, чтобы разместить стили, характерные для этих тем.

Например, SCSS : 

.dark-theme {
    .content {
        background: #333;
        color: #fff;
    }
}

.light-theme {
    .content {
        background: #eee;
        color: #333;
    }
}

И затем, когда ваш пользователь выбирает тему, вы можете использовать javascript, чтобы изменить класс элемента верхнего уровня, такого как body:

HTML : 

<body class="dark-theme">
    ...
</body>

JS : См. Этот ответ для , как изменить имя класса с помощью JavaScript .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...