SASS:How do I get width & height of a parent in a nested decleration? [duplicate]

Question

I'd like a child element to inherit the same dimensions as its parents. How can I access the parent width and height? Something like this:

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

Answer 1

None of these replies are answers to the question asked, really.

Say I’m working with rems or vws or some obscure properties, and need to explicitly define say, a line-height, and not a height.

The answer, as far as I know, is that it isn’t possible to dynamically fetch parent property values. But, you can store the height in a variable in the parent scope, and then re-use it further down the hierarchy.

Answer 2

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

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

Answer 3

You can set width and height in variable with sass.

.thumb {
    $thumbSize: 120px;

    width: $thumbSize;
    height: $thumbSize;
    .content {
        width: $thumbSize;
        height: $thumbSize;
    }
}

If you want to change width and height then just change the variable value. Its more easy to handle.