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.


    CSS Howto..

    Navigation Bar - Each button is at a seperate line, how do I fix that?

    How to set fit-content for width in right side - dynamic content width

    Can't make any different fonts show up on website with @font-face or google fonts

    CSS hide/show effect works on Firefox but not on Chrome/Safari

    How do I add curved corners to menu in css

    how to restrict the children element inside the parent element in css?

    Text-only CSS slideshow

    Show an image from b&w to color as if it were loading (left to right)

    How to use JS/Jquery to replaces repeated CSS styles - Nested List

    How To Make iPhone6 Plus Landscape Mode Work Better with Bootstrap3?

    How to simulate \hfill with HTML and CSS?

    How to get a asp:Panel's CSS Class in code-behind after it has changed by CSS

    How to make transparent corners of borders for a perspective effect?

    How to style a link which wrote with echo? [closed]

    How to make a sliding dashboard similar to medium.com? [closed]

    How can I force Internet Explorer to apply CSS styles

    how change active class on a listItem using jquery

    How to display a header inline with paragraph text using divs or an alternative method

    How can I get this anchor link to look like a button

    How to link a table cell?

    How to inherit css from grandparent tag? [duplicate]

    how to set the outer
    adapt to the browser,and the div in it adapt to the outer one?

    how to animate a div towards different direction and fade out using jquery

    How to include library files (css/js) in angular-fullstack based app

    Why is my text not showing in my DIV?

    How to align elements equally in a line in CSS/Bootstrap?

    how do responsive recaptcha images

    How to add a banner inside a div at the bottom?

    How do I refresh the qtip label to display new label for specific button on hover?

    How to show hidden div in the same line as the paragraph text?