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?
Use offsetWidth & offsetHeight properties of the DOM element to get its the width and height.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With