CSS moins avec l'image de l'arrière-plan et le gradient?

Question

Quel est le moyen le plus efficace d'écrire moins pour cela afin qu'il puisse créer des règles pour tous les navigateurs?

CSS output: 

background: url(../i/bg_lines7.png), -webkit-linear-gradient(left, #555, #333) #333; 
background: url(../i/bg_lines7.png), -moz-linear-gradient(left, #555, #333) #333; 
.. 


CSS output: 
background: #000, url(../i/bg_lines7.png), -webkit-linear-gradient(left, #555, #333); 
background: #000, url(../i/bg_lines7.png), -moz-linear-gradient(left, #555, #333); 

Answer 1

Utilisez des mixins.

.my-multi-browser-thing (@image,@gsc,@gec,@bfb) { 
    background: url(../i/@image), -webkit-linear-gradient(left, @gsc, @gec) @bfb; 
    background: url(../i/@image), -moz-linear-gradient(left, @gsc, @gec) @bfb; 
    ... add more syntax variations ... 
} 

.my-multi-browser-thing ("bg_lines7.png",#555,#333);