SASS: How to get the width and height of a parent in a nested ad?

Question

I want the child to inherit the same dimensions as its parents. How to access the width and height of the parent? Something like that:

.thumb { width: 120px; height: 120px;); .content { width: $parent.width()}; height: $parent.height()}} 

Answer 1

 .thumb { width: 120px; height:120px; .content { width:100%; height:100%; display:block; } } 

You may or may not need display:block in the parent element, depending on its type.

Answer 2

None of these answers answer the question asked.

Say Im when working with rem or vw or some obscure properties, and you need to explicitly define say, a line-height , not a height .

The answer, as far as I know, is that it is not possible to dynamically retrieve the values ​​of the parent properties. But you can save the height in a variable in the parent area, and then reuse it further down the hierarchy.

Answer 3

 .thumb { display: block; width: 120px; height: 120px; } .content { display: block; width: 100%; height: 100%; box-sizing: border-box; /* if you need borders and/or padding */ } 

Answer 4

Sometimes simple css helps:

 .thumb, .thumb .content { width: 120px; height: 120px; } 

Answer 5

Depending on your case, you can try using the CSS3 property with a border field:

http://www.w3.org/TR/css3-ui/#box-sizing0

By the way, it does not work on IE <= 7. Additional information here: SASS: width: 100% - 20px - is this possible?

Answer 6

You can set the width and height in a variable using sass.

 .thumb { $thumbSize: 120px; width: $thumbSize; height: $thumbSize; .content { width: $thumbSize; height: $thumbSize; } } 

If you want to change the width and height, just change the value of the variable. It is easier to handle.