How do convert % to rem in Dot Less

Question

I'm using Dot Less and trying to create a responsive framework with media queries.

EXAMPLE: If a viewport has a width of 600px (I'm not using pixel btw - it's just for ease of illustration) - I calculate margins based on a 2 column layout - 2.5% (15px) for each margin, of which there are 4.

I do a similar thing for both 1 column and 3 column layouts. All this works fine.

However I also want to apply that margin to other internal containers - the problem is that internal containers are not necessarily going to be the same width as the viewport, therefore 2.5% on an inner box thats 300px wide - is going to be 7-8px.

I guess if it possible converting the % to pixels or rems might solve the issue but I can't get this to work.

I'd appreciate any help with this problem, or is there a better solution available, that I'm not aware of?

Answer 1

See my comment, may be you could try the following:

css

body {
  margin: 0;
}
[class^="col-"], [class*=" col-"] {
float:left;
margin: 0 0.5rem;
background-color:purple;
}
[class^="col-"] [class*=" col-"],
[class^="col-"] [class^="col-"], 
[class*=" col-"] [class*=" col-"],
[class*=" col-"] [class^="col-"]
{
background-color:green;
}

.col-one {
width: calc(100% - 1rem);
}   
.col-half {
width: calc(50% - 1rem);
}   
.col-third {
width:  calc(33.33333333% - 1rem);
}   

@media (min-width: 48rem) {
[class^="col-"], [class*=" col-"] {
margin: 0 1rem; 
}
.col-one {
width: calc(100% - 2rem);
}   
.col-half {
width: calc(50% - 2rem);
}   
.col-third {
width:  calc(33.33333333% - 2rem);
}
}

@media (min-width: 60rem) {
[class^="col-"], [class*=" col-"] {
margin: 0 1.5625rem;    
}

.col-one {
width: calc(100% - 3.125rem);
}   
.col-half {
width: calc(50% - 3.125rem);
}   
.col-third {
width:  calc(33.33333333% - 3.125rem);
}

}

html

<div class="col-one">One</div>
<div class="col-half">Half</div>
<div class="col-half">Half</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>


<div class="col-half">
<div class="col-half">Half</div>
<div class="col-half">Half</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>
</div>  
<div class="col-half">
<div class="col-half">Half</div>
<div class="col-half">Half</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>
</div>

The result of the preceding will look like that shown in the following figure: