Сгенерировал спрайт с помощью этого сервиса ru.spritegen.website-performance.org и там выдало кусок LESS кода, но в проекте я использую SCSS - http://joxi.ru/l2ZVK0DHjvLV2J
.stitches-sprite(@x: 0, @y: 0, @width: 0, @height: 0) {
background-position: @x @y;
width: @width;
height: @height;
}
.sprite {
background-image: url(spritesheet.png); background-repeat: no-repeat;
display: block;
&.sprite-courier {
.stitches-sprite(-5px, -5px, 79px, 43px);
}
&.sprite-dhl {
.stitches-sprite(-94px, -5px, 84px, 21px);
}
&.sprite-icon {
.stitches-sprite(-94px, -36px, 51px, 51px);
}
&.sprite-icon-2 {
.stitches-sprite(-155px, -36px, 51px, 51px);
}
&.sprite-icon-3 {
.stitches-sprite(-5px, -97px, 51px, 51px);
}
&.sprite-icon-4 {
.stitches-sprite(-66px, -97px, 51px, 51px);
}
&.sprite-icon-5 {
.stitches-sprite(-127px, -97px, 51px, 51px);
}
&.sprite-icon-6 {
.stitches-sprite(-5px, -158px, 53px, 15px);
}
&.sprite-item-big {
.stitches-sprite(-68px, -158px, 90px, 35px);
}
&.sprite-item-header {
.stitches-sprite(-188px, -5px, 32px, 13px);
}
&.sprite-jcb {
.stitches-sprite(-188px, -97px, 43px, 41px);
}
&.sprite-mastercard {
.stitches-sprite(-230px, -5px, 74px, 51px);
}
&.sprite-mastercard-securecode {
.stitches-sprite(-188px, -148px, 80px, 42px);
}
&.sprite-post-russia {
.stitches-sprite(-241px, -66px, 76px, 38px);
}
&.sprite-visa {
.stitches-sprite(-168px, -200px, 56px, 39px);
}
&.sprite-visa-verified {
.stitches-sprite(-234px, -200px, 74px, 47px);
}
}
Как из этого небольшого куска LESS кода переформатировать в SCSS?
@mixin stitches-sprite($x: 0, $y: 0, $width: 0, $height: 0) {
background-position: $x $y;
width: $width;
height: $height;
}
.sprite {
background-image: url('spritesheet.png');
background-repeat: no-repeat;
display: block;
&.sprite-courier {
@include stitches-sprite(-5px, -5px, 79px, 43px);
}
&.sprite-dhl {
@include stitches-sprite(-94px, -5px, 84px, 21px);
}
&.sprite-icon {
@include stitches-sprite(-94px, -36px, 51px, 51px);
}
&.sprite-icon-2 {
@include stitches-sprite(-155px, -36px, 51px, 51px);
}
&.sprite-icon-3 {
@include stitches-sprite(-5px, -97px, 51px, 51px);
}
&.sprite-icon-4 {
@include stitches-sprite(-66px, -97px, 51px, 51px);
}
&.sprite-icon-5 {
@include stitches-sprite(-127px, -97px, 51px, 51px);
}
&.sprite-icon-6 {
@include stitches-sprite(-5px, -158px, 53px, 15px);
}
&.sprite-item-big {
@include stitches-sprite(-68px, -158px, 90px, 35px);
}
&.sprite-item-header {
@include stitches-sprite(-188px, -5px, 32px, 13px);
}
&.sprite-jcb {
@include stitches-sprite(-188px, -97px, 43px, 41px);
}
&.sprite-mastercard {
@include stitches-sprite(-230px, -5px, 74px, 51px);
}
&.sprite-mastercard-securecode {
@include stitches-sprite(-188px, -148px, 80px, 42px);
}
&.sprite-post-russia {
@include stitches-sprite(-241px, -66px, 76px, 38px);
}
&.sprite-visa {
@include stitches-sprite(-168px, -200px, 56px, 39px);
}
&.sprite-visa-verified {
@include stitches-sprite(-234px, -200px, 74px, 47px);
}
}
С виду, вам хватит просто немножко ручного редактирования, а после немножко поиска с заменой. Ваш stitches_sprite
выглядит как примесь (раздел Mixins, почему-то якори на этой странице не работают).
Синтаксис примеси в Sass довольно прост, вот пример с сайта Sass (в синтаксисе SCSS):
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
То есть:
stitches_sprite
вам нужно оформить ключевым словом @mixin
, префиксы всех переменных заменить с @
на $
.stitches_sprite
использовать @include stitches_sprite
И всё.
Преобразование из CSS в любой другой препроцессор, или между CSS препроцессорами http://csspre.com/convert/
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Пытаюсь написать функцию с переменным числом параметров без использования доп библиотекФункция такого вида: sum(int к-во элементов,элемент1,элемент2...
Нужно найти подстроку, в строке wstring, без учёта регистраОС - Windows
Использую Map компонент под QML и кровь из носа нужно сделать поддержку различных поставщиков карт, таких как Yandex, Google, Yahoo и тд