배경 이미지 및 그라디언트가 적은 CSS?

Question

모든 브라우저에 대한 규칙을 만들 수 있도록이 코드를 적게 쓰는 가장 효율적인 방법은 무엇입니까?

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

믹스 인을 사용하십시오.

.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);