How to return a “text” in css less?

Tags: css,css3,less

Problem :

how to do something like this: ?

.test1(@light: 1px;){
    "inset 0 @light 0 rgba(255, 255, 255, 0.2)";
}
.test2(@elevation: 3px;){
    "0 @elevation 0 rgba(000, 000, 000, 0.1)";
}

@testing: .test1() "," .test2(); 
box-shadow: @testing;

sorry about my english, i'm portuguese

---

Solution :

I recommend the following approach:

// Box shadow.
.mx-box-sh (@arguments) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}

// Mixin for your specific needs.
.mx-my-box-sh (@light: 1px, @elevation: 3px) {
  .mx-box-sh(e(%("inset 0 %s 0 rgba(255, 255, 255, 0.2), 0 %s 0 rgba(0, 0, 0, 0.1)", @light, @elevation)));
}

// Call the mixin.
.my-selector {
  .mx-my-box-sh();
}

Make sure you’re using the latest LESS compiler (1.4.0).

As much as I’m aware, you can’t “return” text from mixins. Mixins are, in fact, procedural constructs that don’t return anything whatsoever.