Menu
I have a Less mixin defined as:
.fontStyle(@family, @size, @weight: normal, @style: normal, @color: #ffffff, @letter-spacing: normal) { font-family: @family; font-size: @size; color: @color; font-weight: @weight; font-style: @style; letter-spacing: @letter-spacing; } How can I define usage like:
.fontStyle('NimbusSansNovCon-Reg', 12px, , , , 0.1em); I.E. use the defaults for @weight, @style, @color
229
Mixins are a group of CSS properties that allow you to use properties of one class for another class and includes class name as its properties. In LESS, you can declare a mixin in the same way as CSS style using class or id selector. It can store multiple values and can be reused in the code whenever necessary.
Multiple parameters are separated by semicolons. Argument names must match parameter names. The order of the arguments passed to a procedure need to correspond to the order of the parameters declared in the procedure.
Keyword ArgumentsExplicit keyword argument can be used to include in mixins. The arguments, which are named can be passed in any order and the default values of argument can be omitted.
Parameters can be separated using commas or semicolon. Mixins provide parameter values instead of positions by using their names. When a mixin is called, the @arguments include all the passed arguments. Mixin takes variable number of arguments by using .....
We can make an argument of mixin optional by defining its default value that argument isn’t passed by @include. Passing null or 0 or no argument passed by @include of mixin led to Optional Arguments. Example 1: Below example illustrates above approach.
Parametric mixins use one or more parameters that extend functionality of LESS by taking arguments and its properties to customize the mixin output when mixed into another block. Here we are using the parametric mixin as .border with three parameters - width, style and color.
Passing null or 0 or no argument passed by @include of mixin led to Optional Arguments. Example 1: Below example illustrates above approach. Example 2: Below example illustrates above approach.
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; See the documentation
http://lesscss.org/features/#mixins-parametric-feature-mixins-with-multiple-parameters
Note: you should get in the habit of using semicolons to separate parameters since some css values can contain commas.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
