M
M
massef2015-05-24 22:25:49
css
massef, 2015-05-24 22:25:49

How to rewrite the stylus section of code in sass?

Hello.
I'm trying to set up sprite generation in gulp, according to an article on Habré .
In the article, the author uses Stylus, it also works with me. But I need to render in SASS.
The only thing left is not clear the following points:
What are the numbers in square brackets, what do they mean? With them, gulp throws an error. The sprite itself is generated.

Error in plugin 'gulp-sass'
Message:
    src\style\modules\_mixin.scss
  52:9  error reading values after $sprite
Details:
    column: 9
    line: 52
    file: E:/GIT-projects/mango_shop/src/style/modules/_mixin.scss
    status: 1
    messageFormatted: src\style\modules\_mixin.scss
  52:9  error reading values after $sprite

I understand the matter in the syntax, but I did not find anything similar in the documentation.
Here is the code itself.
@mixin spriteWidth($sprite) {
  width: $sprite[4];
}
@mixin spriteHeight($sprite) {
  height: $sprite[5];
}
@mixin spritePosition($sprite) {
  background-position: $sprite[2] $sprite[3];
}
@mixin spriteImage($sprite) {
  background-image: url(../img/sprite/$sprite[8]);
}
@mixin sprite($sprite) {
  @if !match('hover', selector()) && !match('active', selector()){
    @include spriteImage($sprite)
  }
  @include spriteImage($sprite);
  @include spritePosition($sprite);
  @include spriteWidth($sprite);
  @include spriteHeight($sprite);
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question