0

Сгенерировал спрайт с помощью этого сервиса 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?

3 ответа 3

3
@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);
    }
}
1
  • Спасибо большое, теперь понятно где я ошибся, так как я знал что надо было заменить @ на $, но вот забыл про слово @mixin
    – Aleksandr
    23 дек 2016 в 7:46
2

С виду, вам хватит просто немножко ручного редактирования, а после немножко поиска с заменой. Ваш 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

И всё.

1

Преобразование из CSS в любой другой препроцессор, или между CSS препроцессорами http://csspre.com/convert/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.