How To Do Theming With Sass

Posted By : Rajan Rawat | 29-Oct-2018

css

Sass is also a way of stylesheet development and here we are using its very basic features, like variables and nesting properties, it saves so much valuable time of developers to make the things so much easier. Everyone knows that the pre-processors of CSS are been very much used for creating a stylesheet for websites and application.

But if we talk about the theming that means you need to change the entire look of a website and also maintaining the layout of a website as well In this post we are going to make the theme with the help of scss and our CSS programming

Let's take this below example

                ≤body class="theme-example"≥
   ≤div class="container"≥
       ≤div class="left"≥
           Left
       ≤/div≥
       ≤div class="right"≥
           Right
           ≤button class="button"≥Button≤/button≥
       ≤/div≥
   ≤/div≥
≤/body≥
≤/html≥

Now here we

are create a multiples themes for it, that means themes will change the colours for every container and buttons and this theme will be determined by the class which we write for the body

Let's create a mixin with a name of theme demo which will contain all the parameters as a color schemes

Now here we are creating multiples themes for it, that means themes will change the colors for every container and buttons and this theme will be determined by the class which we write for the body

                @include themedemo(theme-example, #f7eb80, #497265, #82aa91, #fff, #bc6a49);
@mixin themedemo($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) {
   .#{$theme-name} {
       .container {
           background-color: $container-bg;
           border: 1px solid #000;
           display: flex;
           height: 500px;
           justify-content: space-between;
           margin: 0 auto;
           padding: 1em;
           width: 50%;

           * {
               color: $innertext;
               font-size: 2rem;
           }

           .left {
               background-color: $left-bg;
               height: 100%;
               width: 69%;
           }

           .right {
               background-color: $right-bg;
               height: 100%;
               position: relative;
               width: 29%;
           }

           .button {
               background-color: $button-bg;
               border: 0;
               border-radius: 10px;
               bottom: 10px;
               cursor: pointer;
               font-size: 1rem;
               font-weight: bold;
               padding: 1em 2em;
               position: absolute;
               right: 10px;
           }
       }
   }
}

run this above example in your web browser you will see the results and you will realize that we have saved a lot of time but here is some problem in this, if you want to make any changes in the theme of Bootstrap then it is very hard to maintain. So to overcome from this problem we need to use maps

Theming with sass maps

              $theme-example: (
   container: (
       bg: #e4ada7,
       color: #000,
       border-color: #000
   ),
   left: (
       bg: #d88880,
       color: #fff,
       height: 100%,
       width: 69%
   ),
   right: (
       bg: #cc6359,
       color: #fff,
       height: 100%,
       width: 29%
   ),
   button: (
       bg: #481b16,
       color: #fff
   )
);

maps are the indexed arrays with keys, with help of map you can create the meaningful and semantic style for our theme, so that will be much easier to maintain and easy to understand for some other developers as well.