Предположим, у меня есть две html страницы на одном сайте, как показано ниже:
Это первая страница
.theme1 {
background-color: black;
color: white;
}
h2 {
color: green;
}
p.special {
color: orange;
}
<body class="theme1">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Paragraph 1</p>
<p class="special">Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</body>
А это вторая страница
.theme2 {
background-color: darkgray;
color: pink;
}
h2 {
color: darkblue;
}
p.special {
color: yellow;
}
<body class="theme2">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Paragraph 1</p>
<p class="special">Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</body>
Как вы заметили, страницы имеют точно такой же HTML, за исключением того факта, что первая страница имеет класс theme1, а вторая - класс theme2. CSS отличается в обоих (на самом деле, у меня будет другая HTML структура, но похожая CSS структура).
Я хотел бы создать .s css файл, и используйте SASS для определения класса в body, и выберите правильные значения темы на основе класса. Как я могу это сделать? Я думал об использовании функций, но я не уверен, как позволить SASS обнаружить, что на странице есть theme1 или theme2 в элементе body.
Моя идея состояла в том, чтобы сделать что-то подобное в .s css file:
$theme1: (
body-bg-color: black,
body-font-color: white,
h2-font-color: green,
p-special-font-color: orange
);
$theme2: (
body-bg-color: darkgray,
body-font-color: silver,
h2-font-color: darkblue,
p-special-font-color: yellow
);
@function getBackgroundColorForBody () {
// DETECT THEME
$theme-name = <detected class of body>; // This is not correct, just an idea
$bg-color = map-get($theme-name 'body-bg-color');
@return $bg-color;
}
body {
background-color: @getBackgroundColorForBody();
}
Я новичок в SASS, поэтому я не уверен, как мне это сделать. Извиняюсь за простое задание.