We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bootstrap collects theme colors together using a map, but the variables themselves can have identities that are different from their map keys. https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/_variables.scss#L77-L87
The folder structure could look like this:
scss/_main.scss scss/sakura.scss scss/themes/default.scss scss/themes/[theme-name].scss
Where sakura.scss would look like this:
sakura.scss
@import "themes/default"; @import "main";
And themes/default.scss would look this:
themes/default.scss
// what's currently in sakura.scss $color-blossom: #1d7484; $color-fade: #982c61; // ... $theme-colors: ( "color-blossom": $color-blossom, "color-fade": $color-fade, // ... );
And themes/[theme-name].scss would look like this:
themes/[theme-name].scss
// copied from sakura-dark.scss for an example $color-blossom-theme-name: #1d7484; $color-fade-theme-name: #982c61; // ... $theme-colors: ( "color-blossom": $color-blossom-theme-name, "color-fade": $color-fade-theme-name, // ... );
By making the variable names for each theme unique, users would be able to import them and do something like this:
@import "../node_modules/sakura.css/scss/themes/default"; @import "../node_modules/sakura.css/scss/themes/dark"; .alert { background-color: $color-blossom; color: $color-bg; &.dark { background-color: $color-blossom-dark; color: $color-bg-dark; } }
I haven't used SCSS too much, though, so perhaps there's another way to import variables without them overriding each other? 🤔
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Bootstrap collects theme colors together using a map, but the variables themselves can have identities that are different from their map keys.
https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/_variables.scss#L77-L87
The folder structure could look like this:
Where
sakura.scss
would look like this:And
themes/default.scss
would look this:And
themes/[theme-name].scss
would look like this:Why?
By making the variable names for each theme unique, users would be able to import them and do something like this:
I haven't used SCSS too much, though, so perhaps there's another way to import variables without them overriding each other? 🤔
The text was updated successfully, but these errors were encountered: