Theming in Angular 7 with Custom CSS Properties and SASS
I am working on an app that uses Custom CSS Properties with SASS to implement theming and it needs to work in IE 11. I have had a look at this library but I can't really discern how to configure it properly.
I have an Angular app and we are switching themes by using class selectors on :root body. The themes contain the variables. The code is working perfectly in Chrome et al, but doesn't work in IE 11. What are the steps to get the library to do its magic and fix my CSS? I know there is a lot of documentation around the cssVars() method, and I have looked at all the dependent projects; but I still can't get it working!
I am using the following format for my variables:
$variables: (
--box-shadow-color: var(--box-shadow-color),
--page-background-color: var(--page-background-color),
}
and giving them these default values:
:root body {
--box-shadow-color: rgba(0, 0, 0, 0.03);
--page-background-color: #{$light-grey};
}
and then swapping them in and out by using classes:
:root body.theme-johnlewis {
--box-shadow-color: rgba(0, 0, 0, 0.03);
--page-background-color: #{$color-red};
}
Is this the right format to be using?
css
angular sass theming angular7 edited Nov 16 '18 at 20:34
Daniel W Strimpel
3,6511719
asked Nov 15 '18 at 18:49
serlingpaserlingpa
2,750124080
add a comment |
I am working on an app that uses Custom CSS Properties with SASS to implement theming and it needs to work in IE 11. I have had a look at this library but I can't really discern how to configure it properly.
I have an Angular app and we are switching themes by using class selectors on :root body. The themes contain the variables. The code is working perfectly in Chrome et al, but doesn't work in IE 11. What are the steps to get the library to do its magic and fix my CSS? I know there is a lot of documentation around the cssVars() method, and I have looked at all the dependent projects; but I still can't get it working!
I am using the following format for my variables:
$variables: (
--box-shadow-color: var(--box-shadow-color),
--page-background-color: var(--page-background-color),
}
and giving them these default values:
:root body {
--box-shadow-color: rgba(0, 0, 0, 0.03);
--page-background-color: #{$light-grey};
}
and then swapping them in and out by using classes:
:root body.theme-johnlewis {
--box-shadow-color: rgba(0, 0, 0, 0.03);
--page-background-color: #{$color-red};
}
Is this the right format to be using?
css
angular sass theming angular7 edited Nov 16 '18 at 20:34
Daniel W Strimpel
3,6511719
asked Nov 15 '18 at 18:49
serlingpaserlingpa
2,750124080
add a comment |
I am working on an app that uses Custom CSS Properties with SASS to implement theming and it needs to work in IE 11. I have had a look at this library but I can't really discern how to configure it properly.
I have an Angular app and we are switching themes by using class selectors on :root body. The themes contain the variables. The code is working perfectly in Chrome et al, but doesn't work in IE 11. What are the steps to get the library to do its magic and fix my CSS? I know there is a lot of documentation around the cssVars() method, and I have looked at all the dependent projects; but I still can't get it working!
I am using the following format for my variables:
$variables: (
--box-shadow-color: var(--box-shadow-color),
--page-background-color: var(--page-background-color),
}
and giving them these default values:
:root body {
--box-shadow-color: rgba(0, 0, 0, 0.03);
--page-background-color: #{$light-grey};
}
and then swapping them in and out by using classes:
:root body.theme-johnlewis {
--box-shadow-color: rgba(0, 0, 0, 0.03);
--page-background-color: #{$color-red};
}
Is this the right format to be using?
css
angular sass theming angular7 edited Nov 16 '18 at 20:34
Daniel W Strimpel
3,6511719
asked Nov 15 '18 at 18:49
serlingpaserlingpa
2,750124080
I am working on an app that uses Custom CSS Properties with SASS to implement theming and it needs to work in IE 11. I have had a look at this library but I can't really discern how to configure it properly.
I have an Angular app and we are switching themes by using class selectors on :root body. The themes contain the variables. The code is working perfectly in Chrome et al, but doesn't work in IE 11. What are the steps to get the library to do its magic and fix my CSS? I know there is a lot of documentation around the cssVars() method, and I have looked at all the dependent projects; but I still can't get it working!
I am using the following format for my variables:
$variables: (
--box-shadow-color: var(--box-shadow-color),
--page-background-color: var(--page-background-color),
}
and giving them these default values:
:root body {
--box-shadow-color: rgba(0, 0, 0, 0.03);
--page-background-color: #{$light-grey};
}
and then swapping them in and out by using classes:
:root body.theme-johnlewis {
--box-shadow-color: rgba(0, 0, 0, 0.03);
--page-background-color: #{$color-red};
}
Is this the right format to be using?
css
angular sass theming angular7 css
angular sass theming angular7 edited Nov 16 '18 at 20:34
Daniel W Strimpel
3,6511719
asked Nov 15 '18 at 18:49
serlingpaserlingpa
2,750124080
edited Nov 16 '18 at 20:34
Daniel W Strimpel
3,6511719
asked Nov 15 '18 at 18:49
serlingpaserlingpa
2,750124080
edited Nov 16 '18 at 20:34
Daniel W Strimpel
3,6511719
edited Nov 16 '18 at 20:34
Daniel W Strimpel
3,6511719
edited Nov 16 '18 at 20:34
Daniel W Strimpel
3,6511719
3,6511719
asked Nov 15 '18 at 18:49
serlingpaserlingpa
2,750124080
asked Nov 15 '18 at 18:49
serlingpaserlingpa
2,750124080
asked Nov 15 '18 at 18:49
serlingpaserlingpa
2,750124080
2,750124080
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You're already using sass, let it handle that for you on compilation by using sass vars instead of css vars since a polyfill in this instance is rather redundant.
Personally what I do in structure is have 2 files be source of truth for all others with sass vars. One specifically for colors, one specifically for everything else and include nothing but vars in the files so when you @import them into other sass files it will just take the vars necessary and not duplicate any css classes. Similar to how most the more popular frameworks have adopted like Bootstrap 4s Variables settings.
As example;
--box-shadow-color: rgba(0, 0, 0, 0.03);
would become;
$box-shadow-color: rgba(0, 0, 0, 0.03);
and used as;
css selector {
box-shadow: 3px 3px 10px $box-shadow-color;
}
or could set the whole value same way while also inheriting the color;
$my-standardized-box-shadow: 3px 3px 10px $box-shadow-color;
and used as;
css selector {
box-shadow: $my-standardized-box-shadow;
}
This way also serves the benefit of not having the user agent care about dealing with those original css variables on init because sass did the work for you before even generating your css. Either way hope this helps, cheers.
answered Nov 16 '18 at 21:29
Chris W.Chris W.
15.9k23572
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326095%2ftheming-in-angular-7-with-custom-css-properties-and-sass%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You're already using sass, let it handle that for you on compilation by using sass vars instead of css vars since a polyfill in this instance is rather redundant.
Personally what I do in structure is have 2 files be source of truth for all others with sass vars. One specifically for colors, one specifically for everything else and include nothing but vars in the files so when you @import them into other sass files it will just take the vars necessary and not duplicate any css classes. Similar to how most the more popular frameworks have adopted like Bootstrap 4s Variables settings.
As example;
--box-shadow-color: rgba(0, 0, 0, 0.03);
would become;
$box-shadow-color: rgba(0, 0, 0, 0.03);
and used as;
css selector {
box-shadow: 3px 3px 10px $box-shadow-color;
}
or could set the whole value same way while also inheriting the color;
$my-standardized-box-shadow: 3px 3px 10px $box-shadow-color;
and used as;
css selector {
box-shadow: $my-standardized-box-shadow;
}
This way also serves the benefit of not having the user agent care about dealing with those original css variables on init because sass did the work for you before even generating your css. Either way hope this helps, cheers.
answered Nov 16 '18 at 21:29
Chris W.Chris W.
15.9k23572
add a comment |
You're already using sass, let it handle that for you on compilation by using sass vars instead of css vars since a polyfill in this instance is rather redundant.
Personally what I do in structure is have 2 files be source of truth for all others with sass vars. One specifically for colors, one specifically for everything else and include nothing but vars in the files so when you @import them into other sass files it will just take the vars necessary and not duplicate any css classes. Similar to how most the more popular frameworks have adopted like Bootstrap 4s Variables settings.
As example;
--box-shadow-color: rgba(0, 0, 0, 0.03);
would become;
$box-shadow-color: rgba(0, 0, 0, 0.03);
and used as;
css selector {
box-shadow: 3px 3px 10px $box-shadow-color;
}
or could set the whole value same way while also inheriting the color;
$my-standardized-box-shadow: 3px 3px 10px $box-shadow-color;
and used as;
css selector {
box-shadow: $my-standardized-box-shadow;
}
This way also serves the benefit of not having the user agent care about dealing with those original css variables on init because sass did the work for you before even generating your css. Either way hope this helps, cheers.
answered Nov 16 '18 at 21:29
Chris W.Chris W.
15.9k23572
add a comment |
You're already using sass, let it handle that for you on compilation by using sass vars instead of css vars since a polyfill in this instance is rather redundant.
Personally what I do in structure is have 2 files be source of truth for all others with sass vars. One specifically for colors, one specifically for everything else and include nothing but vars in the files so when you @import them into other sass files it will just take the vars necessary and not duplicate any css classes. Similar to how most the more popular frameworks have adopted like Bootstrap 4s Variables settings.
As example;
--box-shadow-color: rgba(0, 0, 0, 0.03);
would become;
$box-shadow-color: rgba(0, 0, 0, 0.03);
and used as;
css selector {
box-shadow: 3px 3px 10px $box-shadow-color;
}
or could set the whole value same way while also inheriting the color;
$my-standardized-box-shadow: 3px 3px 10px $box-shadow-color;
and used as;
css selector {
box-shadow: $my-standardized-box-shadow;
}
This way also serves the benefit of not having the user agent care about dealing with those original css variables on init because sass did the work for you before even generating your css. Either way hope this helps, cheers.
answered Nov 16 '18 at 21:29
Chris W.Chris W.
15.9k23572
You're already using sass, let it handle that for you on compilation by using sass vars instead of css vars since a polyfill in this instance is rather redundant.
Personally what I do in structure is have 2 files be source of truth for all others with sass vars. One specifically for colors, one specifically for everything else and include nothing but vars in the files so when you @import them into other sass files it will just take the vars necessary and not duplicate any css classes. Similar to how most the more popular frameworks have adopted like Bootstrap 4s Variables settings.
As example;
--box-shadow-color: rgba(0, 0, 0, 0.03);
would become;
$box-shadow-color: rgba(0, 0, 0, 0.03);
and used as;
css selector {
box-shadow: 3px 3px 10px $box-shadow-color;
}
or could set the whole value same way while also inheriting the color;
$my-standardized-box-shadow: 3px 3px 10px $box-shadow-color;
and used as;
css selector {
box-shadow: $my-standardized-box-shadow;
}
This way also serves the benefit of not having the user agent care about dealing with those original css variables on init because sass did the work for you before even generating your css. Either way hope this helps, cheers.
answered Nov 16 '18 at 21:29
Chris W.Chris W.
15.9k23572
answered Nov 16 '18 at 21:29
Chris W.Chris W.
15.9k23572
answered Nov 16 '18 at 21:29
Chris W.Chris W.
15.9k23572
answered Nov 16 '18 at 21:29
Chris W.Chris W.
15.9k23572
15.9k23572
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326095%2ftheming-in-angular-7-with-custom-css-properties-and-sass%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
