Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting the dimensions of an element with SCSS?

Tags:

sass

element

I recently discovered scss, and the fact that it has the ability to use mathematical operators. What I am wondering is: **Is there a way for me to dynamically retrieve the dimensions of an element to use for setting the dimensions of a different element?

An example of what I would like to do is as follows (written in jQuery):

$("#myparagraph").height($("#page").height() / 6);

Is there any way to do this using scss?

like image 446
Ephraim Avatar asked Jun 05 '12 18:06

Ephraim


People also ask

How do you find the dimensions of a element?

Use offsetWidth & offsetHeight properties of the DOM element to get its the width and height.

How do I get the size of an element in CSS?

Unfortunately, it is not possible to "get" the height of an element via CSS because CSS is not a language that returns any sort of data other than rules for the browser to adjust its styling. Your resolution can be achieved with jQuery, or alternatively, you can fake it with CSS3's transform:translateY(); rule.

How do I get the size of an element in HTML?

If you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border, you want to use the HTMLElement. offsetWidth and HTMLElement. offsetHeight properties. Most of the time these are the same as width and height of Element.


1 Answers

No.

While SCSS will allow you to calculate values using variables and math, it still compiles down to CSS. CSS is not a dynamic language that can provide calculated dimensions on DOM objects. It is also not queryable. SCSS is not a separate language in and of itself, but rather a pre-processor that allows you to more efficiently create CSS. Therefore, anything that you can do in SCSS you can do in plain CSS and vice versa (although it may be more difficult to keep track of) and nothing more or less.

like image 70
Jason Avatar answered Oct 03 '22 19:10

Jason