CODEWITHSUNDEEP
csssassless
Real Dreams
Real Dreams

Reputation: 18010

String manipulation in less/scss?

Using less functions is it possible to convert to t r b l to t l b r?

.foo{
    border: fn(1px 2px 3px 4px)
}

Upvotes: 0

Views: 118

Answers (1)

Julio Feferman
Julio Feferman

Reputation: 2676

Here is a solution using mixin:

.border (@t, @l, @b, @r) {
    border-top:@t;
    border-left:@l;
    border-bottom:@b;
    border-right:@r;
}

.foo  {
    width:100px;
    height:100px;
    .border(2px, 1px, 3px, 4px);
}

This compiles to:

.foo {
  width: 100px;
  height: 100px;
  border-top: 2px;
  border-left: 1px;
  border-bottom: 3px;
  border-right: 4px;
}

UPDATE

As proposed by @seven-phases-max, here is a more efficient solution:

.border(@t, @l, @b, @r) {
    border: @t @r @b @l;
}

.foo  {
    .border(1px, 2px, 3px, 4px);
}

Which compiles to:

.foo {
  border: 1px 4px 3px 2px;
}

Upvotes: 2

Related Questions