Converting "Long Shadow" SASS Mixin to Less

Converting Long Shadow SASS mixin to Less

Well, in short, beside the very basic language statements like variable and mixin declarations, SCSS and Less are vastly different languages in fact. So when it comes to more advanced stuff like variable scope and lifetime, iterative and conditional structures etc. etc. there's no straight-forward conversion between them.
Furthermore, since this particular mixin is also an almost perfect example of "spaghetti code", it is actually much more easy to write such mixin from scratch rather than try to convert it "line by line":

@import "for";

.long-shadow(@type, @color, @length, @fadeout: true, @scew: false, @direction: right) {
    .-() {
        @dir:  1px;
        @offset: 0;
        @s: (.5px * @i);
        @a: (1 - @i / @length);
        @c: fade(@color, (100% * alpha(@color) * @a * @a));
    }
    .-() when (@direction = left) {@dir: -1px}
    .-() when (@type = box)       {@offset: 1}
    .-() when (@scew = false)     {@s: ;}
    .-() when (@type = text)      {@s: ;}
    .-() when (@fadeout = false)  {@c: @color}

    .for(0, (@length - 1)); .-each(@i) {
        .-();
        @x: (@dir * (@i + @offset));
        @y: (1px  * (@i + @offset));
        @{type}-shadow+: @x @y 0 @s @c;
    }
}

usage {
    .long-shadow(text, red,  4, true, false, right);
    .long-shadow(box,  blue, 4, false, true, left);
}

See also this codepen.
It is not exactly compatible with the original mixin, for instance:

• the mixin accepts only unquoted parameters (e.g. box and true instead of 'box' and 'true')
• uses slightly different handling of fadeout (could be better though, see P.P.S. below)
• does not disable fadeout for the text type (seems like unnecessary limitation)
• produces different scew size

So it's up to you to make further modifications if you need an exact clone.

P.S. Yep, and the link to the imported "for" goody.

P.P.S. Btw., there's better fading out method with more natural result. See this codepen

How to convert this SCSS mixin to LESS?

Update for LESS 1.6+

It is almost a direct mapping now with the 1.6 update, like so:

LESS

.posL(@property, @value) {
   @{property}: @value;
}

.box {
   width:200px;
   height:200px;
   background:red;
   position:absolute;
   .posL(left, 100px);
 }

CSS Output

.box {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 100px;
}

Original Answer (pre 1.6)

There is currently no real way to do dynamic property names in LESS (whether for prefixing or for full property names ,like you want), though there is discussion about it.

I recommend a generic mixin with a nested, guarded mixin for the logic. This still gives you selection to specific properties, but does require some more explicit code to set it up. Something like:

.posL(@property, @value) {
   .getProp(left) {
      left: @value;
    }
   .getProp(-rtl-left) {
      -rtl-left: @value;
   }
   .getProp(@property);
}

Then use it very similar to how you do the SASS version:

.box {
   width:200px;
   height:200px;
   background:red;
   position:absolute;
   .posL(left, 100px);
 }

Compiles to:

.box {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 100px;
}

How to simplify this LESS CSS Box-shadow mixin? (multiple shadows with directions)

No problem:

.text-shadow-3d(@x, @y, @index) when (@index > 0) {

    // Loop-de-loop.
    .text-shadow-3d(@x, @y, @index - 1);

    // The '+' after 'text-shadow' concatenates with comma.
    text-shadow+: @x*@index @y*@index 0 black;
}

.text-shadow-3d(1px, 1px, 5);

Result:

text-shadow: 1px 1px 0 #000000, 2px 2px 0 #000000, 3px 3px 0 #000000, 4px 4px 0 #000000, 5px 5px 0 #000000;

Docs:

http://lesscss.org/features/#loops-feature

http://lesscss.org/features/#merge-feature

What is the SASS equivalent of additive mixin definitions in LESS?

To the best of my knowledge, there is no way to replicate what you want to achieve by building on to existing mixins. If you define a mixin two times, the second will overwrite the first. See example

AFAIK the common practice in Sass is to use media query mixins inside the selector to keep the code clean and readable. Breakpoint is a popular library that adds a lot of nice functionality for doing this.

An example of the code would be.

@import "breakpoint";

$medium: 600px;
$large: 1000px;

$breakpoint-no-queries: false;          // Set to true to ignore media query output
$breakpoint-no-query-fallbacks: true;   // Set to true to output no-query fallbacks
$breakpoint-to-ems: true;               // Change px to ems in media-queries

.menu {
  content: "base";

  // Mobile styles
  @include breakpoint(min-width $medium - 1) {
    content: "mobile";
  }

  // Tablet styles
  @include breakpoint($medium $large) {
    content: "tablet";
  }

  // Desktop styles with no-query fallback
  @include breakpoint($large, $no-query: true) {
    content: "large";
  }

}

This could output (depending on your settings)

.menu {
  content: "base";
  content: "large";
}
@media (min-width: 37.4375em) {
  .menu {
    content: "mobile";
  }
}
@media (min-width: 37.5em) and (max-width: 62.5em) {
  .menu {
    content: "tablet";
  }
}
@media (min-width: 62.5em) {
  .menu {
    content: "large";
  }
}

You can play around with the settings here

I often have a stylesheet for modern browsers that support media queries set up like this:

// main.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-fallbacks: false;

@import "imports";

And another stylesheet for older browsers that don't support media queries

// no-mq.scss
$breakpoint-no-queries: true;
$breakpoint-no-query-fallbacks: true;

@import "imports";

SASS box-shadow Mixin crashing Internet Explorer 8

Turned out to be an old version of respond.min.js blowing things up!

LESS mixin advice

LESS does not support parameters which depend on other parameters. To implement an optional second argument, you can add another mixin:

.font( @size:1.6 ) {
  .font(@size, @size * 1.5)
}
.font( @size, @line ) {
    /* ... See question for the remainder ... */

compiles to:

h1 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24.000000000000004px;
  line-height: 2.4000000000000004rem;
}

---

Related Topics