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
Blurry Text on Transform:Rotate in Chrome
Preventing Relayout Due to Scrollbar
How to Identify and Eliminate Unused CSS Styles from My Bloated Stylesheet
Reading Documents CSS in Chrome Extension
How to Suppress Certain CSS Errors in Aptana Studio 3
Custom List Style for Ordered Lists
CSS Set Width to Fill % of Remaining Area
How to Compile a Directory Full of Less CSS Files to CSS
Tinymce Is Removing <Style> Tags
Different Behaviours of Treating \ (Backslash) in the Url by Firefox and Chrome
Min-Width and Max-Width with the Same Value
How to Get Rid of Unwanted Space Between Inline-Block Columns
CSS Use Color from Another Class