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

Question

[Александр Янк]

Сгенерировал спрайт с помощью этого сервиса ru.spritegen.website-performance.org и там выдало кусок LESS кода, но в проекте я использую SCSS - 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?

Comments

[Александр Янк]

Помогите разобрать тогда кусок маленькой части кода:
.stitches-sprite(@x: 0, @y: 0, @width: 0, @height: 0) {
background-position: @x @y;
width: @width;
height: @height;
}

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

[Евгений Вольф]

Я просто оставлю это здесь...