Generated a sprite using this service ru.spritegen.website-performance.org and there issued a piece of LESS code, but in the project I use SCSS - http://joxi.ru/l2ZVK0DHjvLV2J

enter image description here

.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); } }

How to reformat from SCSS with this small piece of LESS code?

    3 answers 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); } }
    • Thank you very much, now I understand where I was wrong, since I knew that it was necessary to replace @ with $, but I forgot about the word @mixin - alex-lenk

    In appearance, just a little manual editing is enough for you, and after a little search with replacement. Your stitches_sprite looks like an admixture (the Mixins section, for some reason, the anchors on this page do not work).

    The impurity syntax in Sass is quite simple, here is an example from the Sass site (in the SCSS syntax):

     @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }

    I.e:

    • stitches_sprite definition you need to arrange with the @mixin , replace the variables with @ with $ prefixes
    • instead of .stitches_sprite use @include stitches_sprite

    And that's all.

      Convert from CSS to any other preprocessor, or between CSS preprocessors http://csspre.com/convert/