sass - Is it possible to make multiple css sheets from single layout-scss page, and multiple variable-scss sheets? -


i'm attempting integrate scss .net theming functionality.

ideally scss in dedicated directory, each theme have own scss page containing exclusively variable values particular theme.

the problem i'm encountering need pass placeholder variables _layout.scss sheet, , have values updated theme scss sheets. original null values outputted.

scss files


resources/scss/_variables.scss

$theme_color: null; 

resources/scss/_layout.scss

@import "variables";  div { color: $theme_color; } 

themes/blue/blue.scss

$theme_color: #0000ff !default;  @import '../../resources/scss/layout'; 

themes/red/red.scss

$theme_color: #ff0000 !default;  @import '../../resources/scss/layout'; 



desired css output files


blue.css

div { color: #0000ff; } 

red.css

div { color: #ff0000; } 

you have backwards. !default flag tells sass value use if doesn't previous declaration doesn't exist.

$foo: red; $foo: blue !default;  @debug $foo; // red  $bar: red !default; $bar: blue;  @debug $bar; // blue 

you need place !default flag on default null values, not theme values.


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -