Use computed value in element using less.js - less

Have the following bit of code:
generate-margins(4);
.generate-margins(#n, #i: 1) when (#i =< #n) {
.marginleft#{i} {
margin-left: (5px * #i);
}
.marginright(5*#{i}) {
margin-right: (5px * #i);
}
.generate-margins(#n, (#i + 1));
}
Which gives me:
.marginleft1 {
margin-left: 5px;
}
.marginright(5*1) {
margin-right: 5px;
}
.marginleft2 {
margin-left: 10px;
}
.marginright(5*2) {
margin-right: 10px;
}
.marginleft3 {
margin-left: 15px;
}
.marginright(5*3) {
margin-right: 15px;
}
.marginleft4 {
margin-left: 20px;
}
.marginright(5*4) {
margin-right: 20px;
}
What I wanted was:
.marginright5 {... }
.marginright10 {... }
...
How can use computed value in element name? I tried using all string functions with no luck.


Did some more testing and came up with this:
.generate-margins(#n, #i: 1) when (#i =< #n) {
#l : #i*5;
.marginleft#{l} {
margin-left: (5px * #i);
}
.marginright#{l} {
margin-right: (5px * #i);
}
.generate-margins(#n, (#i + 1));
}
Would still like to know if there is another way. Cheers.

Related

Empty grid column on the right side [duplicate]

In regards to BS 3 if I wanted just a narrow column of content on the right I might use an offset class of 9 and a column of 3.
However, what if I wanted the reverse and on the left side? Is there a proper way to do this in BS or should I just use my own CSS methods? I was thinking of creating a column of 3 with my content and just an empty column of 9.

Bootstrap rows always contain their floats and create new lines. You don't need to worry about filling blank columns, just make sure they don't add up to more than 12.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-offset-9">
I'm a right column of 3
</div>
</div>
<div class="row">
<div class="col-xs-3">
I'm a left column of 3
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
And I'm some content below both columns
</div>
</div>
</div>

I'm using the following simple custom CSS I wrote to achieve this.
.col-xs-offset-right-12 {
margin-right: 100%;
}
.col-xs-offset-right-11 {
margin-right: 91.66666667%;
}
.col-xs-offset-right-10 {
margin-right: 83.33333333%;
}
.col-xs-offset-right-9 {
margin-right: 75%;
}
.col-xs-offset-right-8 {
margin-right: 66.66666667%;
}
.col-xs-offset-right-7 {
margin-right: 58.33333333%;
}
.col-xs-offset-right-6 {
margin-right: 50%;
}
.col-xs-offset-right-5 {
margin-right: 41.66666667%;
}
.col-xs-offset-right-4 {
margin-right: 33.33333333%;
}
.col-xs-offset-right-3 {
margin-right: 25%;
}
.col-xs-offset-right-2 {
margin-right: 16.66666667%;
}
.col-xs-offset-right-1 {
margin-right: 8.33333333%;
}
.col-xs-offset-right-0 {
margin-right: 0;
}
#media (min-width: 768px) {
.col-sm-offset-right-12 {
margin-right: 100%;
}
.col-sm-offset-right-11 {
margin-right: 91.66666667%;
}
.col-sm-offset-right-10 {
margin-right: 83.33333333%;
}
.col-sm-offset-right-9 {
margin-right: 75%;
}
.col-sm-offset-right-8 {
margin-right: 66.66666667%;
}
.col-sm-offset-right-7 {
margin-right: 58.33333333%;
}
.col-sm-offset-right-6 {
margin-right: 50%;
}
.col-sm-offset-right-5 {
margin-right: 41.66666667%;
}
.col-sm-offset-right-4 {
margin-right: 33.33333333%;
}
.col-sm-offset-right-3 {
margin-right: 25%;
}
.col-sm-offset-right-2 {
margin-right: 16.66666667%;
}
.col-sm-offset-right-1 {
margin-right: 8.33333333%;
}
.col-sm-offset-right-0 {
margin-right: 0;
}
}
#media (min-width: 992px) {
.col-md-offset-right-12 {
margin-right: 100%;
}
.col-md-offset-right-11 {
margin-right: 91.66666667%;
}
.col-md-offset-right-10 {
margin-right: 83.33333333%;
}
.col-md-offset-right-9 {
margin-right: 75%;
}
.col-md-offset-right-8 {
margin-right: 66.66666667%;
}
.col-md-offset-right-7 {
margin-right: 58.33333333%;
}
.col-md-offset-right-6 {
margin-right: 50%;
}
.col-md-offset-right-5 {
margin-right: 41.66666667%;
}
.col-md-offset-right-4 {
margin-right: 33.33333333%;
}
.col-md-offset-right-3 {
margin-right: 25%;
}
.col-md-offset-right-2 {
margin-right: 16.66666667%;
}
.col-md-offset-right-1 {
margin-right: 8.33333333%;
}
.col-md-offset-right-0 {
margin-right: 0;
}
}
#media (min-width: 1200px) {
.col-lg-offset-right-12 {
margin-right: 100%;
}
.col-lg-offset-right-11 {
margin-right: 91.66666667%;
}
.col-lg-offset-right-10 {
margin-right: 83.33333333%;
}
.col-lg-offset-right-9 {
margin-right: 75%;
}
.col-lg-offset-right-8 {
margin-right: 66.66666667%;
}
.col-lg-offset-right-7 {
margin-right: 58.33333333%;
}
.col-lg-offset-right-6 {
margin-right: 50%;
}
.col-lg-offset-right-5 {
margin-right: 41.66666667%;
}
.col-lg-offset-right-4 {
margin-right: 33.33333333%;
}
.col-lg-offset-right-3 {
margin-right: 25%;
}
.col-lg-offset-right-2 {
margin-right: 16.66666667%;
}
.col-lg-offset-right-1 {
margin-right: 8.33333333%;
}
.col-lg-offset-right-0 {
margin-right: 0;
}
}

<div class="row">
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
</div>

I modified Bootstrap SASS (v3.3.5) based on Rukshan's answer
Add this in the end of the calc-grid-column mixin in mixins/_grid-framework.scss, right below the $type == offset if condition.
#if ($type == offset-right) {
.col-#{$class}-offset-right-#{$index} {
margin-right: percentage(($index / $grid-columns));
}
}
Modify the make-grid mixin in mixins/_grid-framework.scss to generate the offset-right classes.
// Create grid for specific class
#mixin make-grid($class) {
#include float-grid-columns($class);
#include loop-grid-columns($grid-columns, $class, width);
#include loop-grid-columns($grid-columns, $class, pull);
#include loop-grid-columns($grid-columns, $class, push);
#include loop-grid-columns($grid-columns, $class, offset);
#include loop-grid-columns($grid-columns, $class, offset-right);
}
You can then use the classes like col-sm-offset-right-2 and col-md-offset-right-1

Since Google seems to like this answer...
If you're looking to match Bootstrap 4's naming convention, i.e. offset-*-#, here's that modification:
.offset-right-12 {
margin-right: 100%;
}
.offset-right-11 {
margin-right: 91.66666667%;
}
.offset-right-10 {
margin-right: 83.33333333%;
}
.offset-right-9 {
margin-right: 75%;
}
.offset-right-8 {
margin-right: 66.66666667%;
}
.offset-right-7 {
margin-right: 58.33333333%;
}
.offset-right-6 {
margin-right: 50%;
}
.offset-right-5 {
margin-right: 41.66666667%;
}
.offset-right-4 {
margin-right: 33.33333333%;
}
.offset-right-3 {
margin-right: 25%;
}
.offset-right-2 {
margin-right: 16.66666667%;
}
.offset-right-1 {
margin-right: 8.33333333%;
}
.offset-right-0 {
margin-right: 0;
}
#media (min-width: 576px) {
.offset-sm-right-12 {
margin-right: 100%;
}
.offset-sm-right-11 {
margin-right: 91.66666667%;
}
.offset-sm-right-10 {
margin-right: 83.33333333%;
}
.offset-sm-right-9 {
margin-right: 75%;
}
.offset-sm-right-8 {
margin-right: 66.66666667%;
}
.offset-sm-right-7 {
margin-right: 58.33333333%;
}
.offset-sm-right-6 {
margin-right: 50%;
}
.offset-sm-right-5 {
margin-right: 41.66666667%;
}
.offset-sm-right-4 {
margin-right: 33.33333333%;
}
.offset-sm-right-3 {
margin-right: 25%;
}
.offset-sm-right-2 {
margin-right: 16.66666667%;
}
.offset-sm-right-1 {
margin-right: 8.33333333%;
}
.offset-sm-right-0 {
margin-right: 0;
}
}
#media (min-width: 768px) {
.offset-md-right-12 {
margin-right: 100%;
}
.offset-md-right-11 {
margin-right: 91.66666667%;
}
.offset-md-right-10 {
margin-right: 83.33333333%;
}
.offset-md-right-9 {
margin-right: 75%;
}
.offset-md-right-8 {
margin-right: 66.66666667%;
}
.offset-md-right-7 {
margin-right: 58.33333333%;
}
.offset-md-right-6 {
margin-right: 50%;
}
.offset-md-right-5 {
margin-right: 41.66666667%;
}
.offset-md-right-4 {
margin-right: 33.33333333%;
}
.offset-md-right-3 {
margin-right: 25%;
}
.offset-md-right-2 {
margin-right: 16.66666667%;
}
.offset-md-right-1 {
margin-right: 8.33333333%;
}
.offset-md-right-0 {
margin-right: 0;
}
}
#media (min-width: 992px) {
.offset-lg-right-12 {
margin-right: 100%;
}
.offset-lg-right-11 {
margin-right: 91.66666667%;
}
.offset-lg-right-10 {
margin-right: 83.33333333%;
}
.offset-lg-right-9 {
margin-right: 75%;
}
.offset-lg-right-8 {
margin-right: 66.66666667%;
}
.offset-lg-right-7 {
margin-right: 58.33333333%;
}
.offset-lg-right-6 {
margin-right: 50%;
}
.offset-lg-right-5 {
margin-right: 41.66666667%;
}
.offset-lg-right-4 {
margin-right: 33.33333333%;
}
.offset-lg-right-3 {
margin-right: 25%;
}
.offset-lg-right-2 {
margin-right: 16.66666667%;
}
.offset-lg-right-1 {
margin-right: 8.33333333%;
}
.offset-lg-right-0 {
margin-right: 0;
}
}
#media (min-width: 1200px) {
.offset-xl-right-12 {
margin-right: 100%;
}
.offset-xl-right-11 {
margin-right: 91.66666667%;
}
.offset-xl-right-10 {
margin-right: 83.33333333%;
}
.offset-xl-right-9 {
margin-right: 75%;
}
.offset-xl-right-8 {
margin-right: 66.66666667%;
}
.offset-xl-right-7 {
margin-right: 58.33333333%;
}
.offset-xl-right-6 {
margin-right: 50%;
}
.offset-xl-right-5 {
margin-right: 41.66666667%;
}
.offset-xl-right-4 {
margin-right: 33.33333333%;
}
.offset-xl-right-3 {
margin-right: 25%;
}
.offset-xl-right-2 {
margin-right: 16.66666667%;
}
.offset-xl-right-1 {
margin-right: 8.33333333%;
}
.offset-xl-right-0 {
margin-right: 0;
}
}

You need to combine multiple classes (col-*-offset-* for left-margin and col-*-pull-* to pull it right)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-offset-9">
I'm a right column
</div>
<div class="col-xs-3">
We're
</div>
<div class="col-xs-3">
four columns
</div>
<div class="col-xs-3">
using the
</div>
<div class="col-xs-3">
whole row
</div>
<div class="col-xs-3 col-xs-offset-9 col-xs-pull-9">
I'm a left column
</div>
<div class="col-xs-3">
We're
</div>
<div class="col-xs-3">
four columns
</div>
<div class="col-xs-3">
using the
</div>
<div class="col-xs-3">
whole row
</div>
</div>
</div>
So you don't need to separate it manually into different rows.

Based on WeNeigh's answer! here is a LESS example
.col-offset-right(#i, #type) when (#i >= 0) {
.col-#{type}-offset-right-#{i} {
margin-right: percentage((#i / #grid-columns));
}
.col-offset-right(#i - 1, #type);
};
.col-offset-right(#grid-columns, xs);
.col-offset-right(#grid-columns, sm);
.col-offset-right(#grid-columns, md);
.col-offset-right(#grid-columns, lg);

Here is the same solution than Rukshan but in sass (in order to keep your grid configuration) for special case that don't work with Ross Allen solution (when you can't have a parent div.row)
#mixin make-grid-offset-right($class) {
#for $index from 0 through $grid-columns {
.col-#{$class}-offset-right-#{$index} {
margin-right: percentage(($index / $grid-columns));
}
}
}
#include make-grid-offset-right(xs);
#media (min-width: $screen-sm-min) {
#include make-grid-offset-right(sm);
}
#media (min-width: $screen-md-min) {
#include make-grid-offset-right(md);
}
#media (min-width: $screen-lg-min) {
#include make-grid-offset-right(lg);
}

<div class="row col-xs-12">
<nav class="col-xs-12 col-xs-offset-7" aria-label="Page navigation">
<ul class="pagination mt-0">
<li class="page-item">
<div class="form-group">
<div class="input-group">
<input type="text" asp-for="search" class="form-control" placeholder="Search" aria-controls="order-listing" />
<div class="input-group-prepend bg-info">
<input type="submit" value="Search" class="input-group-text bg-transparent">
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>

Bootstrap 5 SASS solution:
#mixin make-col-offset-end($size, $columns: $grid-columns) {
$num: divide($size, $columns);
margin-right: if($num == 0, 0, percentage($num));
}
#mixin make-grid-offset-end($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
#each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
#include media-breakpoint-up($breakpoint, $breakpoints) {
#if $columns > 0 {
// `$columns - 1` because offsetting by the width of an entire row isn't possible
#for $i from 0 through ($columns - 1) {
#if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
.offset-end#{$infix}-#{$i} {
#include make-col-offset-end($i, $columns);
}
}
}
}
}
}
}
#include make-grid-offset-end();
This will give you all of the classes offset already has, but with offset-end (e.g. offset-end-md-2)

Nested loops in Less

I have some nested loops in Less.
It should create css rules for padding with 3 sizes and 4 direction.
Code sample:
#sizes: normal, small, large;
#size-normal: 1em;
#size-small: 0.8 * #size-normal;
#size-large: 1.2 * #size-normal;
.l-padding {
#directions: top, left, right, bottom;
.s(#i: length(#sizes)) when (#i > 0) {
.s((#i - 1));
.d(#j: length(#directions)) when (#j > 0) {
.d((#j - 1));
#dir: extract(#directions, #j);
#s: extract(#sizes, #i);
#size: "size-#{s}";
&_#{dir}_#{s} {
.l-padding-mixin(#dir, ##size);
}
}
.d();
}
.s();
}
I don't know where is the problem but it compile to many duplacates. However each independet loop do their job.
.l-padding_top_normal {
padding-top: 1em;
}
.l-padding_left_normal {
padding-left: 1em;
}
.l-padding_right_normal {
padding-right: 1em;
}
.l-padding_bottom_normal {
padding-bottom: 1em;
}
.l-padding_top_normal {
padding-top: 1em;
}
.l-padding_left_normal {
padding-left: 1em;
}
.l-padding_right_normal {
padding-right: 1em;
}
.l-padding_bottom_normal {
padding-bottom: 1em;
}
.l-padding_top_normal {
padding-top: 1em;
}
...
.l-padding_top_normal {
padding-top: 1em;
}
.l-padding_top_small {
padding-top: 0.8em;
}
.l-padding_left_small {
padding-left: 0.8em;
}
.l-padding_right_small {
padding-right: 0.8em;
}
.l-padding_bottom_small {
padding-bottom: 0.8em;
}
.l-padding_top_normal {
padding-top: 1em;
}
.l-padding_left_normal {
padding-left: 1em;
}
.l-padding_right_normal {
padding-right: 1em;
}
.l-padding_bottom_normal {
padding-bottom: 1em;
}
...
To many duplicates. Can any one help with this?
UPD
thanks to #Harry find solution:
.l-padding-mixin(#direction, #size: 1em) {
padding-#{direction}: #size;
}
#sizes: normal, small, large;
#size-normal: 1em;
#size-small: 0.8 * #size-normal;
#size-large: 1.2 * #size-normal;
//==== layouts ====
.l-padding {
#directions: top, left, right, bottom;
#i: length(#sizes);
#j: length(#directions);
.d(#j) when (#j > 0) {
.d((#j - 1));
#dir: extract(#directions, #j);
#s: extract(#sizes, #i);
#size: "size-#{s}";
&_#{dir}_#{s} {
.l-padding-mixin(#dir, ##size);
}
}
.-(#i) when (#i > 0) {
.-((#i - 1));
.d(#j);
} .-(#i);
}

How do I convert number to words while looping in LESS?

I am exploring a way to convert numbers in words while looping through LESS.
Right now I have following code
.margin(#n, #i:1) when (#i <= #n) {
.space-#{i} {
margin: 0rem+ #i ;
}
.space-#{i}-top {
margin-top: 0rem + #i ;
}
.space-#{i}-bottom {
margin-top: 0rem + #i ;
}
.margin(#n, (#i+1));
}
.margin(2);
Which produces:
.space-1 {
margin: 1rem;
}
.space-1-top {
margin-top: 1rem;
}
.space-1-bottom {
margin-top: 1rem;
}
.space-2 {
margin: 2rem;
}
.space-2-top {
margin-top: 2rem;
}
.space-2-bottom {
margin-top: 2rem;
}
However, I wanted to achieve class names as space-one instead space-1 and so on.
How do I utilize array in LESS? Thanks.

See extract function. E.g.
#names:
one,
two,
three,
four,
five;
.margin(3);
.margin(#i: 1) when (#i > 0) {
.margin(#i - 1);
#name: extract(#names, #i);
.space-#{name} {
margin: #i * 1rem;
}
}

LESS mixin: How to loop through passed in arguments

I usually write SASS, but for a particular project I have to use LESS.
How do I achieve something like the below using less? Using sass the mixin can be called like #include align(hcenter top) to position an element horizontally in the middle and to the top.
#mixin align($styles) {
position: absolute;
content: '';
display: block;
#each $style in $styles {
#if ($style == center) {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#if ($style == hcenter) {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#if ($style == vcenter) {
margin-top: auto;
margin-bottom: auto;
top: 0;
bottom: 0;
}
#if ($style == top) {
top: 0;
}
#if ($style == bottom) {
bottom: 0;
}
#if ($style == right) {
right: 0;
}
#if ($style == left) {
left: 0;
}
}
}

See Mixin Arguments, List Functions and Loops.
With a thing like "for" the snippet can be converted to something like:
#import "loops/for";
#usage {
.align(hcenter, top, bottom, etc);
}
.align(#styles...) {
position: absolute;
content: '';
display: block;
.for(#styles); .-each(#style) {
& when (#style = center) {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
& when (#style = hcenter) {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
& when (#style = vcenter) {
margin-top: auto;
margin-bottom: auto;
top: 0;
bottom: 0;
}
& when (#style = top) {
top: 0;
}
& when (#style = bottom) {
bottom: 0;
}
& when (#style = right) {
right: 0;
}
& when (#style = left) {
left: 0;
}
}
}
---
Actually above code can be optimized to more compact:
.align(#styles...) {
position: absolute;
content: '';
display: block;
.center(#pos) {
margin-#{pos}: auto;
#{pos}: 0;
}
.for(#styles);
.-each(center) {.-each(hcenter); .-each(vcenter)}
.-each(hcenter) {.center(left); .center(right)}
.-each(vcenter) {.center(top); .center(bottom)}
.-each(#style) when (default()) {#{style}: 0}
}
Though this way it may look more confusing for one not too familiar with Less.

I'm not sure about your each loop. For instance (center, top;) will set top: 0; twice?
But you can try:
.align(#styles){
.setproperties(#iterator:1) when (#iterator <= length(#styles)) {
#style: extract(#styles,#iterator);
& when (#style = center) {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
& when (#style = hcenter)
{
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
// add more & when 's here
.setproperties((#iterator + 1));
}
position: absolute;
content: '';
display: block;
.setproperties();
}
The above can be called with:
selector1 {
.align(center;);
}
selector2 {
.align(center hcenter;);
}

Streamline LESS mixin

I have some LESS for making margins based on the side being passed (top, right, bottom, left or all):
.margin(#px,#side) when (#side = top) {
(){ margin-top: ~"#{px}px"; }
}
.margin(#px,#side) when (#side = right) {
(){ margin-right: ~"#{px}px"; }
}
.margin(#px,#side) when (#side = bottom) {
(){ margin-bottom: ~"#{px}px"; }
}
.margin(#px,#side) when (#side = left) {
(){ margin-left: ~"#{px}px"; }
}
.margin(#px,#side) when (#side = all) {
(){ margin-top: ~"#{px}px";
margin-right: ~"#{px}px";
margin-bottom: ~"#{px}px";
margin-left: ~"#{px}px"; }
}
My question is that if I have an ID like this:
#testfeature {
.margin(10px,l);
.margin(10px,r);
}
Then LESS compiles it like this:
#testfeature {
margin-left:10px;
}
#testfeature {
margin-right:10px;
}
How do I get it to compile like this:
#testfeature {
margin-left:10px;
margin-right:10px;
}

Get rid of the unnecessary () { ... }'s that are wrapping all of your mixin styles. They're causing the selectors to be interpreted oddly and separating them into different selections, rather than joining everything under one selection:
.margin(#px,#side) when (#side = top) {
margin-top: ~"#{px}px";
}
.margin(#px,#side) when (#side = right) {
margin-right: ~"#{px}px";
}
.margin(#px,#side) when (#side = bottom) {
margin-bottom: ~"#{px}px";
}
.margin(#px,#side) when (#side = left) {
margin-left: ~"#{px}px";
}
.margin(#px,#side) when (#side = all) {
margin-top: ~"#{px}px";
margin-right: ~"#{px}px";
margin-bottom: ~"#{px}px";
margin-left: ~"#{px}px";
}
You could probably also drop the ~"#{px}px" in favor of simply #px, also the last mixin should probably be:
.margin(#px, #side) when (#side = all) {
margin: #px;
}

To get them to "group" you need to create a nested and grouped mixin. Below is a grouped mixin function, "streamlined" for margin setting.
It takes anywhere from 1 to 8 parameters; always in pairs of position then value (except as noted below; it can accept any order of position and values of auto or inherit are allowed).
Passing a single "position" just sets a 0px margin on that position.
Defaults non-unit numbers to px, but keeps explicitly set units as passed.
Passing a single parameter that is number value will set all the margins to that number equally.
LESS Mixin
.setMargins(#s1: ~'', #v1: 0, #s2: ~'', #v2: 0, #s3: ~'', #v3: 0, #s4: ~'', #v4: 0) {
.setPos(top, #T) {
.setNum() when (isnumber(#T)) {
margin-top: #T * 1px;
}
.setNum() when not (isnumber(#T)){
margin-top: #T;
}
.setNum();
}
.setPos(right, #R) {
.setNum() when (isnumber(#R)) {
margin-right: #R * 1px;
}
.setNum() when not (isnumber(#R)) {
margin-right: #R;
}
.setNum();
}
.setPos(bottom, #B) {
.setNum() when (isnumber(#B)) {
margin-bottom: #B * 1px;
}
.setNum() when not(isnumber(#B)) {
margin-bottom: #B;
}
.setNum();
}
.setPos(left, #L) {
.setNum() when (isnumber(#L)) {
margin-left: #L * 1px;
}
.setNum() when not (isnumber(#L)) {
margin-left: #L;
}
.setNum();
}
//allows all to be called with one number or value
.setPos(#A, 0) when (isnumber(#A)) {
margin: #A * 1px;
}
.setPos(auto, 0) {
margin: auto;
}
.setPos(inherit, 0) {
margin: inherit;
}
//default null if no valid side given
.setPos(#other, 0) {}
//call all possible positions
.setPos(#s1, #v1);
.setPos(#s2, #v2);
.setPos(#s3, #v3);
.setPos(#s4, #v4);
}
Examples
.setMargins(right); produces margin-right: 0px;
.setMargins(right, 15); produces margin-right: 15px;
.setMargins(left, 10em); produces margin-left: 10em;
.setMargins(top, 12, right, 10); produces: margin-top: 12px; margin-right: 10px;
.setMargins(25); produces: margin: 25px;
.setMargins(auto); produces: margin: auto;
So you use it in a selector:
LESS
#testfeature {
.setMargins(left, 10, right, 10);
}
CSS Output
#testfeature {
margin-left: 10px;
margin-right: 10px;
}