benim web için renk değiştirici yapıyorum renk web değiştirici

Question

için sass içinde değişken bildiren böyle değişkeni yapmak mümkündür:

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

sayesinde buradan SUKDÖ'nün ile doğal olarak yanlış bir şey yok

Answer 1

- en azından prensipte - ama sözdizimsel olarak biraz çarpık. Ayrıca, yapmaya çalıştığınız şey, bunun için istemci tarafı çalışma zamanı kodunun uygulanmasını gerektirir.

İlk önce değişkenlere gerçekten ihtiyacınız olmasa da - bununla birlikte çalışırız. Yani bu bir CSS dosyası oluşturur varsayarak

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

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

için küstahlığı değiştirip senin senin HTML sayfasına ithal Bunu almak isteyen elemana uygun renk sınıfı uygulamak için JavaScript biraz gerekir özelliği.

temiz veya modülerize kodundan uzağa

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 

Bu gibi bir şey olabilir benzersiz kimliği, bir öğenin kimliği arka plan rengini değiştirmek tıklandığında yıllardan, = foo ile 3 elemanlarını (düğmeleri) sahip olduğu varsayılarak cevap için http://codepen.io/anon/pen/rewoOY