0

I am trying to create a square(or div) in the browser according the size of the screen, so I am using percentage, i want the square to be 40% of the height of the screen, and get the amount of this percentage in pixels and use it for the width in order to get a square. And also use these values to center it. I know that with javascript should be easy, but i am new to less and I am wondering how this can be done. I tried the following and doesnt work:

@base:calc(40% * 1px);

#mytransform { 
   background-color:#ccc;
   height:@base;
   width:@base;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-(@base/2);
   margin-left:-(@base/2);

 }

how can i transform percentage to pixels?

MariaZ
  • 1,677
  • 9
  • 25
  • 41

3 Answers3

2

You Cannot Do What You Desire With Precompiled LESS

LESS is a CSS preprocessor. That means it processes the code to form it into CSS before the browser ever sees it; and as far as LESS is concerned, the browser does not exist. What that means is, 40% of the height of the browser window is totally unknown to LESS. All that it knows is 40%, having no idea what that will actually translate into for pixels at a later time.

You will either want to stick to javascript, or use extra html mark-up to get the squaring effect.

Client-Side Compiling (NOT Recommend for Production)

I need to stress the fact that client-side compiling is recommended only for development. If someone has javascript turned off, then they will get NO styling. And those that have it turned on are going to experience a slowdown in page loading.

Now, the reason you get an invalid type error is because the returned value needs to be made into a number that LESS understands (I think it is treating the returned value as a string). This can be easily done like so (see the changes to the @base assignment):

@base: (0.4 * unit(`window.innerHeight`, px));

#mytransform { 
   background-color:#ccc;
   height:@base;
   width:@base;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-(@base/2);
   margin-left:-(@base/2);
 }

My CSS Output On One Run At less2css.org

#mytransform {
  background-color: #ccc;
  height: 243.60000000000002px;
  width: 243.60000000000002px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -121.80000000000001px;
  margin-left: -121.80000000000001px;
}
Community
  • 1
  • 1
ScottS
  • 71,703
  • 13
  • 126
  • 146
  • In the documentation of LESS it says that is possible to use javascript, I saw something like @height: `document.body.clientHeight`; this gets a value of 0 because I think there might not be any elements in the body, then I tried @height: `window.innerHeight`; and it gives a value, but when i tried to make a mathematical operation doesnt work, it says invalid types. – MariaZ Aug 01 '13 at 02:18
  • Yes, you can use inline javascript. However, unless you are going to compile the LESS client side (**which is not recommended for production release, only for development**) the LESS will still be unaware of its final browser environment. At that point, you might as well use javascript to do it, rather than javascript through LESS. However, if you insist on doing client side compiling, I will update my answer to show you how to get around the invalid types. – ScottS Aug 01 '13 at 02:42
  • Ow... I see!, but it think the code that you just posted will display a rectangle not a square, very very nice explanation thanks! – MariaZ Aug 01 '13 at 03:12
  • Well technically, a square is a special type of rectangle--so yes, it will display a rectangle :-). But it will also be a square, because the `window.innerHeight` will be a `px` value, and that same `px` value will be applied to both height and width. Now, my code above did not account for the `40%` sizing, so I'll modify for that and then post what I get on a particular test run at www.less2css.org. – ScottS Aug 01 '13 at 03:42
  • Thanks so much for such a nice explanation and specially the code @base: (0.4 * unit(window.innerHeight, px)); that really works! – MariaZ Aug 02 '13 at 00:14
0

I had a similar task: "Center a square div according screen-width/height".

Try using CSS's vmin (compare CSS Specification) as in my jsfiddle to get e.g. a squared div centered with 50% of the minimum of horizontal/vertical viewport in percent.

CSS to scale and center div as described:

.centeredDiv {
  width: 50vmin;
  height: 50vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25vmin;
  margin-left: -25vmin;
  background: #FF0000;
}

View port-tag you may need in your mobile website

<meta content="width=device-width,initial-scale=1" name="viewport">

(I had troubles on iOS when adding "maximum-scale" or "user-scalable" in content-attribute)

Please find jsFiddle for reference here:

http://jsfiddle.net/YCawM/

Andi F.
  • 717
  • 5
  • 7
0

CSS pure solution, this code will create a div of 40% width and height of the viewport and it will position it in the center of viewport.

Use position:fixed; to keep the button positioned relative to the viewport.

Use left and top properties to position your div.

With calc(), you can perform calculations to determine CSS property values.

Use vw and vh units to get the viewport dimensions.

With with 50vw you say to browser to position at 50% of the viewport width, and you need subtract 20% (= 50% of you div size which it turn to be 40% of the viewport).

    #target{
      position:fixed;
      width: 40vw;
      height: 40vh;
      left: calc(50vw - 20%);
      top: calc(50vh - 20%);
      background-color:red;
    }
<div id="target"></div>
GibboK
  • 71,848
  • 143
  • 435
  • 658