Whatever text you pass to an @variable
when you use the mixin in a selector block will be copied to the places where the @variables
appear in the mixins, and the contents of the mixins will be placed in your block. You can consider mixins somewhat like placeholder functions.
That means that if you declare a selector like:
div p:first-child {
.transition(width 2s ease-in-out, color 2s;);
color: red;
}
Using the .transition
mixin you listed above, the Less processor will generate a CSS like:
div p:first-child {
-webkit-transition: width 2s ease-in-out, color 2s;
transition: width 2s ease-in-out, color 2s;
color: #FF0000;
}
The semicolon is important at the end of the argument otherwise Less may get confused and think you are sending two parameters, since comma-separated parameters are also valid. It won't be a problem in this case (since there is no .transition
mixin that accepts two arguments), but it's good practice to always separate arguments with semicolons.
So to use the mixins, simply place them where you would add CSS declarations, end them with a semicolon, and pass the parameters as arguments.
Less does no duplication detection, so if you call the mixin twice, it just copies the replaced contents twice. If you already have a transition: property
, for example, the mixin will add another one and its effect may be lost if yours comes after.
The best place to learn about Less, variables and mixins in at http://lesscss.org which has the full documentation in a few pages with plenty of examples. It's also great to have an editor which converts your Less files into CSS in real time so you understand how it works.
For the example you posted, you could create a mixin like the following:
.your-mixin(@origin, @transition, @transform, @anim-fill-mode) {
-webkit-transform-origin: @origin;
-webkit-transition: @transition;
-webkit-transform: @transform;
-webkit-animation-fill-mode: @anim-fill-mode;
-moz-transform-origin: @origin;
-moz-transition: @transition;
-moz-transform: @transform;
-moz-animation-fill-mode: @anim-fill-mode;
-ms-transform-origin: @origin;
-ms-transition: @transition;
-ms-transform: @transform;
-ms-animation-fill-mode: @anim-fill-mode;
-o-transform-origin: @origin;
-o-transition: @transition;
-o-transform: @transform;
-o-animation-fill-mode: @anim-fill-mode;
transform-origin: @origin;
transition: @transition;
transform: @transform;
animation-fill-mode: @anim-fill-mode;
}
To use it, you add it inside a selector block where you want the properties copied to:
.your-selector, .other-selector {
.your-mixin(top; all 0.2s linear; scale(1, 0); forwards;);
}