Как осуществить перевод куска кода LESS в SCSS?

426
25 декабря 2016, 21:13

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

Answer 1
@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);
    }
}
Answer 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

И всё.

Answer 3

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

READ ALSO
Функция умножения float чисел

Функция умножения float чисел

Пытаюсь написать функцию с переменным числом параметров без использования доп библиотекФункция такого вида: sum(int к-во элементов,элемент1,элемент2...

390
Поиск подстроки без учёта регистра [требует правки]

Поиск подстроки без учёта регистра [требует правки]

Нужно найти подстроку, в строке wstring, без учёта регистраОС - Windows

331
Qt custom geoservice plugin

Qt custom geoservice plugin

Использую Map компонент под QML и кровь из носа нужно сделать поддержку различных поставщиков карт, таких как Yandex, Google, Yahoo и тд

382