How to Create Multiple Box-Shadow Values in Less CSS

How do you create multiple box-shadow values in LESS CSS

The best solution is to make separate overloads for each number of shadows. Less handles the proper overload resolution:

.box-shadow(@shadow1) {
    -webkit-box-shadow: @shadow1;
    -moz-box-shadow: @shadow1;
    box-shadow: @shadow1;
}

.box-shadow(@shadow1, @shadow2) {
    -webkit-box-shadow: @shadow1, @shadow2;
    -moz-box-shadow: @shadow1, @shadow2;
    box-shadow: @shadow1, @shadow2;
}    

.box-shadow(@shadow1, @shadow2, @shadow3) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3;
    box-shadow: @shadow1, @shadow2, @shadow3;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4, @shadow5) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
}

EDIT:

Ok, I'm still learning about LESS, but it appears that will actually mixin ALL of the overloads in certain situations, instead of the one with the most applicable parameter list, so you may get varying results. I've since revised my mixins so that they're named box-shadow-2 or box-shadow-3, to match the expected number of parameters. I'll revise my answer once I figure out what's going on / have a better solution.

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

Less mixin issue for multiple box-shadow arguments

LESS now

Current versions of LESS allow you to use commas as separators of lists, and then put a single semicolon at the end of the parameter to pass the whole thing as a comma separated list. So this now works (note the extra semicolon at the end right before the closing parenthesis.

.box-shadow(0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2););
                                                                                                                                                                                                        ^here

Original (pre LESS 1.3.3) Answer

Here's how LESS needs to be done to get the same output:

.box-shadow(@shadows) {
    -webkit-box-shadow: @shadows;
    -moz-box-shadow: @shadows;
    box-shadow: @shadows;
}

.div {
    .box-shadow(~"0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2)");
}

.div2 {
    .box-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

NOTE: To do multiple shadows as your .div, you need to pass them as a single argument using an escaped string, which is why the first use has ~" " surrounding the whole argument string. If you are just passing one shadow, that is not necessary. LESS needs that to get the commas between the shadow groups.

CSS - Create multiple box shadow

I Hope you are looking for this

div {
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius:50%;
    box-shadow: 0 5px 0 rgba(255, 0, 0, 1), 0 10px 0 rgba(0, 255, 0, 1);
}

Creating a flat long shadow for boxes in CSS with less CSS

You can use 2 pseudos with skew to simulate the same shadow

div {

  min-height: 64px;

  width: 64px;

  text-align: center;

  background-color: cyan;

  border: 1px solid blue;

  position: relative;

}

div:before, div:after {

  content: "";

  position: absolute;

  top: -1px;   /* compensate border in the root element */ 

  left: -1px;

  right: -1px;

  bottom: -1px;

  z-index: -1;

  transform-origin: right bottom;

}

div:before {

  transform: skewX(45deg);

  box-shadow: 1px 60px 0px 0px gray, 1px 120px 0px 0px lightgray;  /* 1px in x direction to avoid small gap between shadows */

}

div:after {

  transform: skewY(45deg);

  box-shadow: 60px 0px gray, 120px 0px lightgray;

}

<div>

  wow that's a lot of CSS!

</div>

Create multiple text-shadow values using SASS/SCSS

You can define variable out side the loop and collect the shadow values on it. Then add the variable as a value of your text-shadow property.

.drop-shadow{
  $value: ();
  @for $i from 1 through 100{
    $num: $i + px;
    $pct: $i / 100;
    $black: 1 - $pct;
    $theShadow:$num $num rgba( 40,40,40,$black );
    $value: append($value, $theShadow, comma)

  }
  text-shadow: $value;
}

writing LESS mixin for box-shadow: none

There is a way to access all the mixin arguments in one variable.

You could write your LESS mixin in this way:

.box-shadow(...)
{
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

And use it later:

.box-shadow(0 0 5px 2px rgba(0, 0, 0, 0.2));

or

.box-shadow(none);

css3 multiple shadows from different rules

I ended up using an extra div placed inside the original div and applied the second shadow class to the internal div.

<div class="blackShadow"><div class="limeShadow"> my div</div></div>

This was chosen becuase it keeps the definitions of the shadow classes separate and still allows me to show both the shadows at the same time.

Concatenating arbitrary number of values in lesscss mixin

Use an escaped string

#myBox { .box-shadow(~"inset 0px 1px 0px white, 0px 0px 5px #aaa"); }

Or a javascript escape

Less 1.2.0 and below:

.box-shadow() {
    @shadow: ~`'@{arguments}'.replace(/[\[\]]/g, '')`;
    -webkit-box-shadow: @shadow;
       -moz-box-shadow: @shadow;
            box-shadow: @shadow;
}
#myBox { .box-shadow(inset 0px 1px 0px white, 0px 0px 5px #aaa); }

Less 1.3.0 and above (requires and uses ... variadic specifier):

.box-shadow(...) {
    @shadow: ~`'@{arguments}'.replace(/[\[\]]/g, '')`;
    -webkit-box-shadow: @shadow;
       -moz-box-shadow: @shadow;
            box-shadow: @shadow;
}

The author's recommended way is an intermediate variable:

#myBox {
  @shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
  .box-shadow(@shadow);
}

Generate CSS classes from a list of values in LESS

It's more about your knowledge and understanding of existing language features rather than about language features themselves.

I.e. even in Less v2 (you're probably using) it's difficult to justify the existence of 4 extra lines of the .generate-detached(@colors...) mixin you have there.

E.g. why not:

@detached-colors: #f00 #0f0 #00f;

.detached-loop(@i: length(@detached-colors)) when (@i > 0) {
    .detached-loop(@i - 1);
    .detached-@{i} {
        @c: extract(@detached-colors, @i);
        box-shadow: inset 0px 0px 8px 2px @c;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @c;
        }
    }
} .detached-loop;

Or:

.make-detached(#f00 #0f0 #00f);
.make-detached(@colors, @i: length(@colors)) when (@i > 0) {
    .make-detached(@colors, @i - 1);
    .detached-@{i} {
        @c: extract(@colors, @i);
        box-shadow: inset 0px 0px 8px 2px @c;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @c;
        }
    }
}

?

---

Less v3 has each function:

each(#f00 #0f0 #00f, {
    .detached-@{index} {
        box-shadow: inset 0px 0px 8px 2px @value;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @value;
        }
    }
});

---

But the similar thing exists for Less v2 as a plugin:

.for-each(@c, @i in @l: #f00 #0f0 #00f) {
    .detached-@{i} {
        box-shadow: inset 0px 0px 8px 2px @c;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @c;
        }
    }
}

---

Related Topics