mixins

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 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

I am trying to create a mixin that dynamically defines variables in LESS CSS, by actually assigning them a composite name. The simplified use-case (not the real one): .define(@var){ @foo{var}: 0; } Then one would call the mixin as such: .define('Bar'){ @fooBar: 0; } Since this kind of string interpolation is possible while using selectors names, I was wondering if the same would be possible for variable names; so far, I have had no luck with various syntaxes I tried (other than the above, I tried escaping, quoting, using the ~ prefix and so on). Edit I just tried one more thing, and I feel I

I try to set up this LESS mixin for CSS animation keyframes: .keyframes(@name, @from, @to) {; @-webkit-keyframes "@name" { from { @from; } to { @to; } } } but there is some problem with name pharse, is there any option to do this corectly? As of LESS >= 1.7 you can use variables for keyframe keywords (names). Some changes have been made in LESS 1.7 to how directives work, which allows to use variables for the name/keyword of @keyframes (so the example from the question should work now). DEMO Unfortunately keyframes names can not be dynamically generated in LESS <= 1.6 Hence, the normal way of

I'm looking through various libraries, and seeing extend() pop up a lot, but I'm also seeing mixin() show up. YUI has both mixins and extensions. What's the difference between these two concepts? When would I decide between a mixin and extending an object? Thanks, Matt Mixins don't work with instanceof but extends do. Mixins allow multiple inheritance but by faking it, not by properly chaining the prototypes. I'll show an Ext-JS example but the concept applies to any class library that provides mixins, they all just copy properties to the object instead of chaining the prototype. Ext.define(

Is there any way to pass one mixin or style's declaration to another mixin as an input parameter? Let's take a look at an example with animation keyframes. Following is how we define keyframes in pure CSS: @-moz-keyframes some-name { from { color: red; } to { color: blue; } } @-webkit-keyframes some-name { from { color: red; } to { color: blue; } } @keyframes some-name { from { color: red; } to { color: blue; } } Idea is to simplify these declarations using mixins, so we can have something like following: .keyframes(name, from, to) { // here we need somehow to reproduce structure // that we

I'm using an specific mixin trying to make my code more clear. So instead of using: <div class="col-lg-3 col-md-5 col-sm-6 col-xs-12"> I'm using: <div class="stackOverflowRocksIt"> and in my mixins.less: .stackOverflowRocksIt{ .make-lg-column(3); .make-md-column(4); .make-sm-column(6); .make-xs-column(12); } It works properly with XS and SM viewports, but not when I resize to MD or LG (then is taking the SM size). Is this the proper way to create columns for different viewports sizes? Any idea? You should re-order your mixin calls: .stackOverflowRocksIt { .make-xs-column(12); .make-sm-column(6

I got some trouble with compostions and mixin . For examples, lets imagine that we have a AHero and Hero1 object. All heroes can move, so AHero.move() is a thing. And now, at a moment of the dev, I want to add the possibility to stun and beStunned. So I make a new object that look like this ( called stunTrait) : { stunned : false, stun(), beStun, } And I decide to give to possiblity to heroes to stun and beStunned. So I do a mixin : class AHero extends stunTrait(superclass). Now I want that a stunned hero can not move. So in Ahero : move(){ if(this.stunned) return; ... } Later I find out stun