Deklarieren Variable in sass für Farbe Web-Wechsler

Question

i Farbwechsler für meine Web mache, ist es möglich, Variable wie diese zu machen:

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

dank

Answer 1

Es ist nichts falsch mit Ihrem SASS hier - zumindest im Prinzip - aber syntaktisch ist es ein bisschen verzerrt. Auch was Sie versuchen zu tun, erfordert jedoch clientseitigen Laufzeitcode für die Implementierung.

Zunächst brauchen Sie zwar die Variablen nicht - aber wir werden damit laufen. So ändern Sie Ihre Sass

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

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

vorausgesetzt, dies ist eine CSS-Datei erzeugt und Ihre diese in Ihre HTML-Seite importieren werden Sie ein wenig Javascript muss die passende Farbklasse auf das Element, das Sie auf diese nehmen wollen bewerben Eigentum.

Angenommen, Sie 3 Elemente (Tasten) mit eindeutigen IDs, die, wenn sie angeklickt wird die Hintergrundfarbe eines Elements ändern = foo Sie diese so etwas wie

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 

ist weit von sauberen oder modularisierte Code haben könnte , aber hoffentlich umreißt er das Prinzip des Verfahrens, das Sie

Hier ein Arbeits codePen mit dem Beispiel folgen müssen: http://codepen.io/anon/pen/rewoOY