How To Do Theming With Sass
Posted By : Rajan Rawat | 29-Oct-2018
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
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
Now here we are creating multiples themes for it, that means themes will change the
@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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rajan Rawat
Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.