Less Mixin with Optional Parameters

Less mixin with optional parameters

To supply a parameter that far down the string of arguments, you have to also supply the expected variable it is to define. So this:

.fontStyle('NimbusSansNovCon-Reg', 12px, @letter-spacing: 0.1em);

Produces this (note how color, font-weight, and font-style used the defaults):

font-family: 'NimbusSansNovCon-Reg';
font-size: 12px;
color: #ffffff;
font-weight: normal;
font-style: normal;
letter-spacing: 0.1em;

LESS: Mixin with optional parameter

So you have

.generated_width (@margins: 40px, @per: 100%)
{
-webkit-width:calc(~"@{per} - " @margins );
-moz-width:calc(~"@{per} - " @margins );
width:calc(~"@{per} - " @margins );
}

When called

.generated_width (40px)
.generated_width (40px, 40%)

I think depending on your LESS version you can also do

.generated_width (@per:40%)

This way you can specify as many optional parameters as you want. This is much more flexible but a little bit more code to type. So if you only have 1 optional param then just leave it at the last spot

LESS Mixins with Optional Parameters - Skip Undefined Properties

Looks like I am able to leverage the Mixin Guards. By using the when not and if not operators nested inside the mixin, I can check for multiple parameters where the , separator acts as an or.

When @blockEnd or @block are truthy, compile the following

.border(@border; @block: null; @blockEnd: null;) {
border: @border;

& when not(@blockEnd = null), not(@block = null) {
border-block-end: if(not (@blockEnd = null), @blockEnd, @block);
}
}

This will evaluate to:

// LESS
.container {
.border(@border: 1px solid red);
}

// CSS
.container {
border: 1px solid red;
}

It feels quite verbose, but it gets the job done.. Am I missing an easier approach, possibly?

Creating a sass mixin with optional arguments

The fourth parameter or your font-style() mixin is $line. You haven't skipped over it when you pass in sans as the argument. Instead you've taken what should be the fifth argument and made it the fourth.

The best approach you can take is to use "keyword arguments": https://sass-lang.com/documentation/at-rules/mixin#keyword-arguments

Essentially you need to tell the mixin which argument it is that you're supplying.

Example:

@include font-style(#000, 14, 400, $family: sans);

Making a Sass mixin with optional arguments

A DRY'r Way of Doing It

And, generally, a neat trick to remove the quotes.

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
-webkit-box-shadow: $top $left $blur $color #{$inset};
-moz-box-shadow: $top $left $blur $color #{$inset};
box-shadow: $top $left $blur $color #{$inset};
}

SASS Version 3+, you can use unquote():

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
-webkit-box-shadow: $top $left $blur $color unquote($inset);
-moz-box-shadow: $top $left $blur $color unquote($inset);
box-shadow: $top $left $blur $color unquote($inset);
}

Picked this up over here: pass a list to a mixin as a single argument with SASS

Is it possible to have optional values in mixins?

See Mixin Guards and CSS Guards, e.g.:

.fontEMSmall(@color: -, @weight: 300) {
& when (iscolor(@color)) {color: @color}
font-weight: @weight;
font-size: 0.875em;
line-height: 140%;
}

Less css with optional parameters

In less using the dotless compiler you can do

.mixin(@b:3);

This will be in the original less.js in 1.3.1 (the next release)- see https://github.com/cloudhead/less.js/pull/268

Conditional parameters within LESS mixin

Just make the mixin specialization/overloading for each style set:

.type(hero, @mb: 1.25rem) {
margin-bottom: @mb;
font-size: 2.625rem;
line-height: 1.238095238;
}

.type(not-a-hero, @mb: 2.22rem) {
margin-bottom: @mb;
font-size: 3.333rem;
line-height: 4.444444444;
}

// etc.

Ref.:

  • Argument
    Pattern-matching
  • Mixins with Multiple
    Parameters


Related Topics



Leave a reply



Submit