CODEWITHSUNDEEP
csspropertiesnamespacesless
David Jones
David Jones

Reputation: 10239

Is there a way to reference the properties within a namespace in LESS?

I'm trying to take advantage of LESS to produce a complex layout of boxes with uniform spacing between each box. I'd like to be able to easily change the spacing without re-adjusting each of the absolutely-positioned boxes. Here's a simplified example (where (.one > height) + @spacing and (.one > width) + @spacing is pseudocode for what I'm trying to accomplish). Is this possible?

@spacing: 4px;

.box {

  position: absolute;

  &.one {
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
  }

  &.two {
    top: (.one > height) + @spacing;
    left: (.one > width) + @spacing;
    width: 100px;
    height: 100px;
  }

}

SOLUTION

I had to use variables, but it accomplishes the same goal:

@spacing: 4px;

.box {

  position: absolute;
  background: white;

  @one-width: 100px;
  @one-height: 100px;

  @two-width: 100px;
  @two-height: 100px;

  &.one {
    top: 0;
    left: 0;
    width: @one-width;
    height: @one-height;
  }

  &.two {
    top: 0;
    left: @one-width + @spacing;
    width: @two-width;
    height: @two-height;
  }

}

Upvotes: 0

Views: 56

Answers (1)

Vinicius
Vinicius

Reputation: 123

I don't think so. Maybe it's better to create variables for the '&.one' height and width:

@oneHeight: 100px;
@oneWidth:  100px;
@spacing:   4px;

.box {

  position: absolute;

  &.one {
    top: 0;
    left: 0;
    width: @oneWidth;
    height: @oneHeight;
  }

  &.two {
    top: @oneHeight + @spacing;
    left: @oneWidth + @spacing;
    width: 100px;
    height: 100px;
  }

}

You can then create 3 or 4 different heights and widths varibles and make a complex layout

Upvotes: 1

Related Questions