Скомпилируйте SASS для разных тем

Question

У меня есть сайт с двумя темами, назовем их «А» и «Б». Приблизительно 98% CSS перекрываются между CSS для обеих тем, поэтому я конвертирую все для использования SASS, так что я могу извлекать переменные только для тех данных, которые должны различаться в обеих темах. Например, вот фрагмент моего "main.scss"

@import '_colors.scss';
body {
    font-family: $font-name;
    background-color: $secondary-color;
}

H1, H2, H3, H4, H5, H6 {
    color: $primary-color;
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 32px;
    text-transform: none;
    letter-spacing: 0px;
}

Итак, взглянув на приведенный выше стиль, вы можете видеть, что у меня есть переменные $ font-name, $ primary-color и $ second-color.

Моя проблема в том, как мне получить образец SASS в одном файле, но импортировать соответствующий scss-файл темы, чтобы определить $ font-name, $ primary-color и $ primary-color?

Моя структура каталогов:

/Content/Themes
     ThemeA
         /main.scss 
         /_colors.scss <-- specific colors to this theme
     ThemeB
         /main.scss 
         /_colors.scss  <-- specific colors to this theme 

И это прекрасно работает, моя проблема в том, что оба файла main.scss идентичны, отличается только файл _colors.scss, поэтому хорошие новостия получаю информацию в CSS, но мне нужен только один файл main.scss, где сейчас требуется, чтобы каждый находился в соответствующем каталоге брендинга.

Как мне упростить это, чтобы у меня был только один основной.scss

Answer 1

Если вы хотите отделить цвета или что-либо, касающееся тем, от вашего основного стиля, у вас есть два варианта:

1. Сначала создайте базовый main.css с цветами по умолчанию, шрифтами по умолчанию и т. Д. Затем создайте отдельный файл для каждой темы, где вы переопределите все правила цветами по умолчанию, включая цвета вашей темы. В конце у вас будет один main.css и theme-a.css, theme-b.css и т. Д. Затем вам придется загружать соответствующий файл css темы при каждом переключении тем.

2. Вы можете использовать пользовательские свойства css, которые также называются переменными css. См. эту страницу для получения дополнительной информации. Положительным моментом является то, что вы сможете изменять значения этих пользовательских свойств во время выполнения, в то время как ваш main.css может остаться без изменений. Недостатком является то, что не все браузеры поддерживают их прямо сейчас. Это будет выглядеть примерно так:

В вашем main.css:

body {
    font-family: var(--font-name);
    background-color: var(--secondary-color);
}

H1, H2, H3, H4, H5, H6 {
    color: var(--primary-color);
}

В вашем файле темы, например, для темы A:

:root {
    --font-name: Arial, Helvetica, sans-serif;
    --primary-color: #bada55;
    --secondary-color: deeppink;
}

В вашем файле темы, например, для темы B:

:root {
    --font-name: Courier, monospace;
    --primary-color: skyblue;
    --secondary-color: maroon;
}