Как можно изменить значение переменной в Sass при нажатии кнопки?

Question

AzureAssassin

node.js , sass

Как можно изменить значение переменной в Sass при нажатии кнопки?

Как можно изменить значение переменной $dark-mode с "false" на "true" при нажатии кнопки в приложении на Node.js? <br/> Обратите внимание, что в приведенном <a href="https://ru.hexlet.io/courses/sass-programming/lessons/conditions/theory_unit" rel="nofollow">источнике</a> не представлено решения данной задачи, а содержится только информация о SCSS. <br/><br/> Пример кода на SCSS: <br/> <pre><code class="css">$dark-mode: false;

@mixin theme {
  // Цвета для светлой темы
  $primary-color: #f9f9f9;
  $text-color: #424242;

  @if $dark-mode == true {
    // Если условие сработает, то мы просто перезапишем значения переменных.
    $primary-color: #161625;
    $text-color: #e1e1ff;
  }

  body {
      background: $primary-color;
      color: $text-color;
  }
}</code></pre>

3 декабря 2024 г. 13:33

Ответы на вопрос 2

Похожие вопросы

Answer 1

В Sass, как вы уже заметили, переменные имеют статический характер и не могут быть изменены во время выполнения приложения. Таким образом, для того чтобы изменить внешний вид вашего приложения в зависимости от темной или светлой темы, вам нужно использовать JavaScript или другой язык программирования на стороне клиента для управления состоянием темы и обновления стилей.

Вот простой способ реализации переключения между темным и светлым режимами при нажатии кнопки с использованием JavaScript:

1. **Стилизация с помощью Sass:** Создайте необходимые стили для светлого и темного режимов с помощью Sass. Например:

```scss
// styles.scss
$dark-mode: false;

@mixin theme($dark-mode) {
  @if $dark-mode {
    // Темная тема
    $primary-color: #161625;
    $text-color: #e1e1ff;
  } @else {
    // Светлая тема
    $primary-color: #f9f9f9;
    $text-color: #424242;
  }

  body {
    background: $primary-color;
    color: $text-color;
  }
}

body {
  @include theme($dark-mode);
}
```

2. **Используйте JavaScript для управления темой:** Создайте кнопку для переключения темы и обработчик события нажатия, чтобы изменить класс на элементе `body` или изменить CSS-переменные.

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"> <!-- Скомпилированный файл CSS -->
    <title>Переключение темы</title>
</head>
<body>
    <button id="theme-toggle">Переключить тему</button>
    <script>
        const button = document.getElementById('theme-toggle');
        let darkMode = false;

        button.addEventListener('click', () => {
            darkMode = !darkMode;
            document.body.classList.toggle('dark-mode', darkMode);
        });
    </script>
</body>
</html>
```

3. **Добавьте стили для темного режима в CSS:** Скомпилируйте ваши Sass стили, чтобы включить классы для темного режима.

```css
/* styles.css */
body {
    background: #f9f9f9;
    color: #424242;
}

body.dark-mode {
    background: #161625;
    color: #e1e1ff;
}
```

Этот пример демонстрирует, как можно переключаться между светлой и темной темами с помощью JavaScript и Sass, при этом переменная `$dark-mode` остается статической в Sass, а состояние темы управляется на стороне клиента.

Answer 2

:root {
  --primary-color: #f9f9f9;
  --text-color: #424242;
}

:root.dark-mode {
  --primary-color: #161625;
  --text-color: #e1e1ff;
}

body {
  background: var(--primary-color);
  color: var(--text-color);
}
 
 Ну и на js напишешь, что бы при нажатии на кнопку добавлялся класс dark-mode к html.