-2

I am trying to convert some less to sass and can't understand how to fix the following bug. This isn't my code it's a clients and I have no clue what they are trying to do.

Could someone please help me? How do I fix the following bug? I have spent the past two hours trying to figure out how to fix it.

Issue: "error (Line 6:Invalid CSS after "...ze:, $key:1) ": expected "{, was "($size =< 30)")"

Code Example:

    @mixin margin($label, $size: 1, $key:1) ($size =< 30)
{
      .m-${key} {
        margin: $size !important;
    }

    .m-t-${key} {
        margin-top: $size !important;
    }

    .m-b-${key} {
        margin-bottom: $size !important;
    }

    .m-l-${key} {
        margin-left: $size !important;
    }

    .m-r-${key} {
        margin-right: $size !important;
    }
}

Thank you very much ahead of time!

stutterbox16
  • 29
  • 2

1 Answers1

0

I believe they are using a LESS mixin guard, which needs to be converted to a SASS conditional

@mixin margin($label, $size: 1, $key:1)
{
   @if ($size <= 30) {
      ...
   }
}
jeffjenx
  • 17,041
  • 6
  • 57
  • 99
  • Okay I will convert over to conditional. Do you understand by chance what the piece of code is trying to accomplish? – stutterbox16 Jun 08 '16 at 22:02
  • 1
    I believe tt is trying to say "apply the following mixin styles when `$size` is less than or equal to `30`" although it is missing the `when` keyword. View the LESS reference manual for more information: http://lesscss.org/features/#mixin-guards-feature – jeffjenx Jun 08 '16 at 22:03
  • Okay thank you very much. But what is the purpose of the ${key}? I still getting an error message and I think I need to fill in the ${key} with something but I am not sure with what. – stutterbox16 Jun 08 '16 at 22:07
  • 1
    The purpose of `$key` is to generate the appropriate CSS class selectors. They are basically creating a class structure for adding margins to elements. Let's say you want `m-t-5` to apply a 5px margin to the top of the element. Then you would call the mixin like this `@include margin('', 5px, 5)` (not sure why `$label` is there). The mixin will create `m-t-5` class to add margin-top whenever the class is added to an element. It also creates `m-5` to apply margins all the way around, `m-b-5` for bottom margin, etc. – jeffjenx Jun 08 '16 at 22:13
  • Or, you could use a $key of `lg` and a $size of `2em` and it will create `.m-t-lg { margin-top: 2em !important; }` etc. – jeffjenx Jun 08 '16 at 22:15
  • @Quantastical: The code in question is definitely not Less. Less doesn't use `@mixin` directives neither does it use `$` prefix for variables. – Harry Jun 09 '16 at 04:40
  • 1
    @Harry, I know. I think the code in question is OP's attempt at converting LESS code to SASS and they were having difficulty understanding what the LESS mixin guard was doing. – jeffjenx Jun 09 '16 at 12:10