CSS SASS：如何在嵌套声明中获得父级的宽度和高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7960355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SASS:How do I get width & height of a parent in a nested decleration?
提问by zakdances
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()}}
采纳答案by stevemanuel
.thumb {
width: 120px;
height:120px;
.content {
width:100%;
height:100%;
display:block;
}
}
You may or may not need display:blockin the parent element as well, depending on its type.
您可能也可能不需要display:block父元素，具体取决于其类型。
回答by Hein Haraldson Berg
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.
假设我正在使用rems 或vws 或一些晦涩的属性，并且需要明确定义 say、 a line-height，而不是 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.
据我所知，答案是不可能动态获取父属性值。但是，您可以将高度存储在父作用域中的变量中，然后在层次结构中进一步使用它。
回答by Guilherme Garnier
Depending on your case, you could try to use border-box CSS3 property:
根据您的情况，您可以尝试使用 border-box CSS3 属性：
http://www.w3.org/TR/css3-ui/#box-sizing0
http://www.w3.org/TR/css3-ui/#box-sizing0
BTW, it doesn't work on IE <= 7. More info here: SASS: width: 100% - 20px - is it possible?
顺便说一句，它在 IE <= 7 上不起作用。更多信息在这里： SASS: width: 100% - 20px - 这可能吗？
回答by Neil
.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 */
}
回答by topek
Somtimes plain css helps:
有时纯 css 有助于：
.thumb, .thumb .content {
width: 120px;
height: 120px;
}
回答by Krish
You can set width and height in variable with sass.
您可以使用 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.
如果要更改宽度和高度，只需更改变量值即可。它更容易处理。
