LESS Расширение расширения файла

Question

Можно ли установить переменную расширения файла, используя LESS?

Вот базовое изложение того, что у меня происходит.

Я использую спрайты для своих фоновых изображений и использую SVG в качестве своего файла, работает как шарм. Однако в IE8 это явно не работает.

Я использую большой чек в Modernizr, заменяющий .svg расширения с .png расширениями, если браузер не поддерживает его:

if (!Modernizr.svg) { 
    jQuery('img[src$=".svg"]').each(function() 
    { 
     jQuery(this).attr('src', jQuery(this).attr('src').replace('.svg', '.png')); 
    }); 
} 

Проблема заключается в том, что для моего спрайтов Mixin Я использую :

@sprite-Grid: 23px; 
.sprite(@x, @y) { 
    background: url(../img/sprite.svg) no-repeat; 
    background-position: -(@x*@sprite-Grid) -(@y*@sprite-Grid); 
} 

И большой сценарий замены маленького изображения не относится к фоновым изображениям, только к тегам.

В идеале, что я ищу, чтобы сделать, это создать МЕНЬШЕ переменную, которая будет работать что-то вроде этого:

JQuery

if (!Modernizr.svg) { 
    jQuery('img[src$=".svg"]').each(function() 
    { 
     jQuery(this).attr('src', jQuery(this).attr('src').replace('.svg', '.png')); 
    }); 


    less.modifyVars({ 
     '@filetype': 'png' 
    }); 
} else { 
    less.modifyVars({ 
     '@filetype': 'svg' 
    }); 
} 

CSS

figure { 
    .sprite(0,0,@filetype); 
} 

@sprite-Grid: 23px; 
.sprite(@x, @y, @filetype) { 
    background: url(../img/sprite.@filetype) no-repeat; 
    background-position: -(@x*@sprite-Grid) -(@y*@sprite-Grid); 
} 

В Короче говоря, я хотел бы создать переменную, которая будет передана, и зависит от того, er поддерживает SVG. Если это так, то оно меняет его на «sprite.svg», и если оно не меняет его на «sprite.png»

Это даже вещь?

Любая помощь очень ценится.

Answer 1

С Modernizr добавляет классы в html элемент свойств поддерживается, и в этом случае добавление svg класс, похоже, самый простой способ для обработки переключатель в LESS, чтобы сделать это в Mixin:

.sprite(@x, @y) { 
    background: url(../img/sprite.png) no-repeat; 
    background-position: -(@x*@sprite-Grid) -(@y*@sprite-Grid); 
    .svg & { 
     background: url(../img/sprite.svg) no-repeat; 
    } 
} 

Затем, когда он используется (при условии, здесь @sprite-Grid: 23px;), это МИНУС:

.testClass { 
    .sprite(10,10); 
} 

Производит этот CSS:

.testClass { 
    background: url(../img/sprite.png) no-repeat; 
    background-position: -230px -230px; 
} 
.svg .testClass { 
    background: url(../img/sprite.svg) no-repeat; 
} 

Таким образом, он добавляет селектор класса .svg над всей цепочкой ваших селекторов, тем самым переопределяя pngsvg, когда он будет доступен. Это увеличит ваш общий размер в файле CSS, но позволит предварительно скомпилировать файл LESS и не позволит вам заменить путь «на лету» для фоновых изображений.