Skip to content

Instantly share code, notes, and snippets.

@skyshab
Last active August 29, 2015 13:56
Show Gist options
  • Save skyshab/9217113 to your computer and use it in GitHub Desktop.
Save skyshab/9217113 to your computer and use it in GitHub Desktop.
Less mixin to set rules conditionally
.set(@property: null; @then: null; ) when not (@property = null ) and not ( @then = null )
{
@{property}: @then;
}
.set( @property: null; @then: null; @when: null; )
{
#check.condition( @when ); .output();
.output() when (@condition) {
.set(@property, @then);
}
}
.set( @property: null; @when: null; @and: null; @or: null; @then: null; @else: null; )
{
#check.condition( @when ); .output();
.output() when (@condition) and (@and = null) {
.set(@property, @then);
}
.output() when (@condition) and not (@and = null) {
.set(@property, @then, @and);
}
.output() when not (@condition) and not (@or = null) {
#check.condition(@or); ._output();
._output() when (@condition) {
.set(@property, @then);
}
._output() when not (@condition) {
.set(@property, @else);
}
}
.output(...) when not (@else = null) and ( default() ) {
.set(@property, @else);
}
}
#check {
.condition( @condition ) when ( 3 = length( @condition ) )
{
.condition(
extract( @condition, 1 ),
extract( @condition, 2 ),
extract( @condition, 3 )
);
}
.condition(@a, eq, @b) when (@a = @b) { @condition: true; }
.condition(@a, gt, @b) when (@a > @b) { @condition: true; }
.condition(@a, ge, @b) when (@a >= @b) { @condition: true; }
.condition(@a, lt, @b) when (@a < @b) { @condition: true; }
.condition(@a, le, @b) when (@a <= @b) { @condition: true; }
.condition(@a, ne, @b) when not(@a = @b) { @condition: true; }
.condition(true) { @condition: true; }
.condition(...) when (default()) { @condition: false;}
} // end #check
// use
@my-color: lightblue;
@my-value: 21px;
@my-switch: true;
@my-other-color: darkblue;
@my-other-value: 42em;
@my-other-switch: true;
.my-thing {
// set background to @my-color, as long as @my-color isn't null (applies to all)
.set(background; @my-color);
// if a certain condition evaluates to true, set border-color to @my-other-color
.set(border-color; @my-other-color; iscolor(@my-other-color) );
// if these two conditions evaluate to true, set color to @then
.set(color;
@when: @my-switch;
@and: lightness(@my-other-color) ge 25%;
@then: darken(@my-other-color, 10%);
);
// if a certain condition evaluates to true, then set padding to @then. Otherwise, set it to @else
.set(padding;
@when: @my-value lt 24px;
@then: 1em;
@else: 1.5em;
);
// if one or another condition evaluates to true, then set margin-botton to @then. Otherwise, set it to @else
.set(margin-bottom;
@when: @my-other-value ge 40em;
@or: @my-other-switch;
@then: 1.5em;
@else: 1em;
);
// static styles
display: block;
float: left;
}
/* output
**************************
.my-thing {
background: #add8e6;
border-color: #00008b;
color: #000058;
padding: 1em;
margin-bottom: 1.5em;
display: block;
float: left;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment