Skip to content

Instantly share code, notes, and snippets.

@nsisodiya

nsisodiya/color1.scss

Created April 17, 2013 11:18
Show Gist options
  • Save nsisodiya/5403513 to your computer and use it in GitHub Desktop.
Save nsisodiya/5403513 to your computer and use it in GitHub Desktop.
Download ZIP
Manage Theme with SASS
Raw
color1.scss
$boxwidth: 300px;
$boxheight: 200px;
$boxbackgroundcolor: #456343;
$whiteFontColor:#E3E1E1;
$bigFontsSize: 30px;
Raw
color2.scss
$boxwidth: 400px;
$boxheight: 150px;
$boxbackgroundcolor: #151383;
$whiteFontColor:#E3E167;
$bigFontsSize: 15px;
Raw
index.html
<html id="root" class="theme1">
<head>
<script>
function changetheme(){
var html = document.getElementById("root");
if(html.getAttribute("class") === "theme1"){
html.setAttribute("class", "theme2")
}else{
html.setAttribute("class", "theme1")
};
}
</script>
<link href="./stylesheets/theme/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="button" value="changetheme" onClick="changetheme()">
<div class="box">This is Hello World</div>
</body>
</html>
Raw
main.scss
@mixin box {
width: $boxwidth;
height: $boxheight;
background: {
color: $boxbackgroundcolor;
};
font: {
size: $bigFontsSize;
};
color: $whiteFontColor;
}
@import "color1.scss";
html.theme1 .box {
@include box;
}
@import "color2.scss";
html.theme2 .box {
@include box;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment