Как включить файл sass с заданными параметрами

Question

Я хотел бы использовать sass-код «по умолчанию» для моих будущих шаблонов, но переменные не найдены. Я ищу способ передачи переменных в файл макета. Я знаю, что @import не поддерживает параметры, но я не могу найти другое решение. Для получения дополнительной информации см. Код ниже.

green.scss

$primary-color: #6ddba4;
$secondary-color: #6ddba4;
$tertiary-color: #6ddba4;

@import 'layout/layout.scss';

layout.scss

.home_icon {

    border: 1px solid $primary-color !important;
    color: $primary-color !important;

    &:hover {

        background-color: $secondary-color !important;
        color: #fff !important;
        border-color: #fff !important;

    }

}

Answer 1

Вам необходимо @ импортировать 'зеленый' в файл layout.scss

green.scss

$primary-color: #6ddba4;
$secondary-color: #6ddba4;
$tertiary-color: #6ddba4;

layout.scss

@import 'green'
    .home_icon {
    border: 1px solid $primary-color !important;
    color: $primary-color !important;
     &:hover {
        background-color: $secondary-color !important;
        color: #fff !important;
        border-color: #fff !important;
        }
    }

Делая это, вы можете получить доступ ко всем переменным, присутствующим в green.scss, к вашему файлу layout.scss.

Answer 2

SASS рассмотрит все ваши .scss файлы (и их части) и скомпилирует их вместе в выходные .css файлы.Таким образом, вы не можете использовать JavaScript для прямой манипуляции с переменными SASS, так как они просто больше не существуют во время запуска JavaScript.

Чтобы обойти это и достичь того, чего вы хотите, вам потребуетсяесть несколько таблиц стилей, сгенерированных SASS, которые вы можете затем заменить с помощью JavaScript.

Это может выглядеть примерно так:

green.scss

$primary-color: green;
$secondary-color: blue;
$tertiary-color: red;

@import "./layout";

red.scss

$primary-color: red;
$secondary-color: blue;
$tertiary-color: orange;

@import "./layout";

_layout.scss

.home_icon {
    border: 1px solid $primary-color !important;
    color: $primary-color !important;
    &:hover {
        background-color: $secondary-color !important;
        color: #fff !important;
        border-color: #fff !important;
    }
}

// Add as much as you want here and reference your variables

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

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

---

В качестве примечания: вы также можете назначить CSS переменным, которыми JavaScript может манипулировать , однако я не думаю, что это подходит для описанного вами варианта использования.Опция, тем не менее, существует, поэтому выберите тот, который работает для вас.