Javascript-форум - Для тех кто юзает LESS кину сюда MIXIN линейных градиентов.

Для тех кто юзает LESS кину сюда MIXIN линейных градиентов.

Может кому то пригодиться:
/**
* Использование:
*   .linear-gradient(top, #00ff00, #ff0000);
*   .linear-gradient(left, #00ff00, #ff0000, important);
*/
.linear-gradient(@direction: left, @start_color: #124661, @stop_color: #1d6287, @_important: none) {
    @svg-keyword: ~`"@{direction}"=="left"?"100%25%22%20y2%3D%220":"0%25%22%20y2%3D%22100"`;
    @webkit-keyword: ~`"@{direction}"=="left"?"right top":"left bottom"`;
    @w3c-keyword: ~`"@{direction}"=="left"?"to right":"to bottom"`;
    @filter-keyword: ~`"@{direction}"=="left"?"1":"0"`;
    @important: ~`"@{_important}"=="none"?"":"!important"`;
    @svg_start_color: escape("@{start_color}");
    @svg_stop_color: escape("@{stop_color}");
    background-color: @start_color @important;
    background-image: ~"url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22g%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22@{svg-keyword}%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22@{svg_start_color}%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22@{svg_stop_color}%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E)" @important;
    background-image: -webkit-gradient(linear, left top, @webkit-keyword, color-stop(0, @start_color), color-stop(1, @stop_color)) @important;
    background-image: -webkit-linear-gradient(@direction, @start_color, @stop_color) @important;
    background-image:    -moz-linear-gradient(@direction, @start_color, @stop_color) @important;
    background-image:     -ms-linear-gradient(@direction, @start_color, @stop_color) @important;
    background-image:      -o-linear-gradient(@direction, @start_color, @stop_color) @important;
    background-image:         linear-gradient(@w3c-keyword, @start_color, @stop_color) @important;
    filter: ~"progid:DXImageTransform.Microsoft.Gradient(StartColorStr='@{start_color}', EndColorStr='@{stop_color}', GradientType=@{filter-keyword})" @important;
    &,#ie#fix {
        /* Выключаем фильтр в ИЕ9 но оставляем в ИЕ7-8 */
        zoom: 1; /* Для ИЕ7 нужно что бы у элемента был включен режим hasLayout */
        filter: ~"expression(this.currentStyle.filter)" @important;
    }
}