Declare variable in sass for color web changer

Question

i am making color changer for my web, is it possible to make variable like this :

.red { $color: red; $background: red; }
.green { $color: green; $background: green; }
.blue { $color: blue; $background: blue; }

thanks

Answer 1

There's nothing inherently wrong with your SASS here - at least in principle - but syntatically it's a tad skewed. Also, what your trying to do though requires so client side run-time code for it to be implemented.

First up though you don't actually need the variables - but we'll run with it. So change your sass to

$red: #ff1a1a;
$green: #5cd65c;
$blue: #1a75ff;

.blue { background-color: $blue; }
.green { background-color: $green }
.red { background-color: $red }

assuming this generates a CSS file and your importing this into your HTML page you'll need a little bit of Javascript to apply the appropriate colour class to the element you want to take on this property.

Assuming you have 3 elements ( buttons ) with unique ID's, which when clicked will change the background colour of an element id=foo you could have something like

var changeColor = function(col) {
    document.getElementById("foo").className = col
}

document.getElementById('buttonblue').addEventListener('click', 
 function() {
    changeColor('blue');
 }, false);
 document.getElementById('buttongreen').addEventListener('click', 
 function() {
    changeColor('green');
 }, false);
 // ... etc etc for each color button you have

This is far from clean or modularised code, but hopefully it outlines the principle of the process which you need to follow

Here's a working codePen with the example: http://codepen.io/anon/pen/rewoOY