HTML / CSS - сохранить переменную в нескольких таблицах стилей - PullRequest
Новая
       22

HTML / CSS - сохранить переменную в нескольких таблицах стилей

1 голос
/ 30 марта 2020

Таким образом, базовый c способ работы моего веб-сайта заключается в том, что существует шаблон "base. html" и "base. css", который имеет верхнюю панель и определяет переменные цвета страницы, цвета текста, и др c. соответственно, вот так: 

:root {
--text-primary: #b6b6b6;
--text-secondary: #5f5f5f;
--bg-primary: #23232e;
--bg-secondary: #141418;
}

Затем остальные HTML страницы начинаются с {% extends "base.html" %} и затем вставляют свое содержимое в тело страницы. Каждая из этих других страниц также будет импортировать таблицу стилей. Например, одна страница использует таблицу для отображения различных параметров. Я хочу, чтобы в этой таблице элементы в ней были окрашены в var("--bg-primary"), но когда я использую переменную, определенную в root одной таблицы стилей, я все равно не могу использовать ее в другой, даже если последняя страница после расширений будет иметь оба импортированные таблицы стилей. Есть ли способ сделать это?

1 Ответ

1 голос
/ 30 марта 2020

Не имеет значения, если пользовательские свойства CSS объявлены во внешнем файле CSS или в том же файле. например,

global. css

:root {
--text-primary: #b6b6b6;
--text-secondary: #5f5f5f;
--bg-primary: #23232e;
--bg-secondary: #141418;
}

style. css

.primary {
    color: var(--text-primary);
}
.secondary {
    color: var(--text-secondary);
}
.bg-primary {
    background-color: var(--bg-primary);
}
.bg-secondary {
    background-color: var(--bg-secondary);
}

test. html

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="global.css" rel="stylesheet">
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div class="primary">foo</div>
        <div class="secondary">bar</div>
        <div class="bg-primary">baz</div>
        <div class="bg-secondary">bat</div>
    </body>
</html>

result :

result of the above code example

Так что это должно быть связано либо с порядком, в который вы импортируете свой css, либо с чем-то еще, связанным с тем, как ваш страница настроена.

Итак, чтобы ответить на ваш вопрос: есть ли способ сделать это? Да, именно так они и работают «из коробки».

Кроме того, вы также можете получить доступ к своим пользовательским свойствам или установить их через javascript. например, 

getComputedStyle(element).getPropertyValue("--text-primary");
element.style.setProperty("--text-primary", "#f0f0f0");
...