Theming in Angular 7 with Custom CSS Properties and SASS












1















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?










share|improve this question





























    1















    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?










    share|improve this question



























      1












      1








      1


      1






      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?










      share|improve this question
















      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 16 '18 at 20:34









      Daniel W Strimpel

      3,6511719




      3,6511719










      asked Nov 15 '18 at 18:49









      serlingpaserlingpa

      2,750124080




      2,750124080
























          1 Answer
          1






          active

          oldest

          votes


















          0














          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.






          share|improve this answer























            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
            });


            }
            });














            draft saved

            draft discarded


















            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









            0














            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.






            share|improve this answer




























              0














              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.






              share|improve this answer


























                0












                0








                0







                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.






                share|improve this answer













                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.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 16 '18 at 21:29









                Chris W.Chris W.

                15.9k23572




                15.9k23572
































                    draft saved

                    draft discarded




















































                    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.




                    draft saved


                    draft discarded














                    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





















































                    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







                    Popular posts from this blog

                    Florida Star v. B. J. F.

                    Danny Elfman

                    Lugert, Oklahoma