SASS вывод из одного файла sass в несколько файлов css

Question

Я хочу вывести несколько файлов css из одного sass-файла. У меня есть один файл: schemes.scss, с кодом, как это:

$schemes: (
    'light': (
    'body-background': white, 
    'headline-color' : #111, 
    'subheadline-color': #222 
), 
    'dark': (
    'body-background': black, 
    'headline-color' : #ddd, 
    'subheadline-color' : #eee 
), 
    'moderate': (
    'body-background': gray, 
    'headline-color' : black, 
    'subheadline-color' : #333 
) 
); 

@each $scheme in $schemes{ 
    //do something to export to separate file 
    @include scheme-base-mixin($scheme); 
} 

так что результат 3 отдельные CSS файлы:

схемно-light.css:

body{ 
    background-color: white; 
} 

h1{ 
    color: #111; 
} 

.subheadline{ 
    color: #222; 
} 

схема-dark.css

body{ 
    background-color: black 
} 

h1{ 
    color: #ddd; 
} 

.subheadline{ 
    color: #eee; 
} 

схемно-moderate.css:

body{ 
    background-color: gray 
} 
h1{ 
    color: black; 
} 
.subheadline{ 
    color: #333; 
} 

Возможно ли это с чистым SASS? .. или с глотком (действительно предпочитают не).

Извлечение общих частей сассы и создание 3 разных файлов sass не является решением в моем случае. У меня 9 схем, умноженных на десятки сложных компонентов. Присоединение схемы оболочкой класса также не является решением.

Answer 1

Как насчет простого препроцессора в чистом рубине (или на любом другом языке, который вам нравится), который вы запускаете, прежде чем компилировать свои активы в css?

# gen_schemes_scss.rb  
schemes_scss = File.read('schemes.scss') 

%i(light dark moderate).each do |scheme| 
    scss = "$scheme: #{scheme};\n" # save current scheme inside scss variable 
    scss += schemes_scss # append the rest 

    File.write("scheme-#{scheme}.scss", scss) # write to new .scss file 
end 

С schemes.scss:

$schemes: (
    'light': (
    'body-background': white, 
    'headline-color' : #111, 
    'subheadline-color': #222 
), 
    'dark': (
    'body-background': black, 
    'headline-color' : #ddd, 
    'subheadline-color' : #eee 
), 
    'moderate': (
    'body-background': gray, 
    'headline-color' : black, 
    'subheadline-color' : #333 
) 
); 

@include scheme-base-mixin($scheme); 

Идея заключается в том, чтобы создавать различные scss файлы этого препроцессора. У вас будет scheme-light.scss, scheme-dark.scss и т. Д. Файлы, которые могут быть скомпилированы.

Я думаю, что чистое решение sass невозможно.

Answer 2

Не думаю, что это возможно только с сассой. Если вы не разделите файлы scss, вам нужно будет использовать что-то вроде глотка.

Используя gulp, вы можете разделить файлы scss (возможно, используя регулярное выражение) и скомпилировать их по отдельности или разбить скомпилированные файлы css (может быть намного медленнее). Я не могу предоставить пример кода, если вы не представите пример своего scss.