我可以通过SASS \ Compass计算和使用元素高度吗 [英] Can I calculate and use element height with SASS \ Compass

问题描述

我在RoR项目中使用了Sass和Compass。我需要为元素的 top CSS属性赋值，即元素高度除以-2。我可以用SASS \罗盘吗？

解决方案

您似乎已经得到XY问题。您有一个要解决的任务，而不是向我们询问该任务，而是询问您尝试过并且已经发现不合适的解决方案。

为什么要申请 top 属性是否等于元素高度的一半并且取反？因为您要将绝对定位的元素向上移动一半高度。这是原始任务。

有一个简单的解决方案可以实现这一点，甚至不需要SASS！ （实际上，只要您不知道元素的高度，SASS就无法提供比CSS更多的帮助。）

我们需要一个额外的包装：

 < div class = container> 
< div class = elements-wrapper> 
< div class = element> 
< / div> 
< / div> 
< / div> 
  

要将元素向上推至其高度的50％，请执行以下两个简单步骤：

1）将其包装纸完全推出容器：

  .elements-wrapper {
位置：绝对； 
底部：100％； } 
  

2）现在将元素下拉其高度的50％：

 。元素{
底边保证金：-50％； } 
  

就是这样！

当您做 margin-bottom：-50％，您实际上将元素拉出了包装器高度的50％。但是包装器的高度等于元素的高度！

别忘了将 position：relative 应用于容器，否则 position：absolute 将相对于窗口而不是容器。

这里是一个 demo （带有注释良好的代码）： http://jsbin.com/uwunal/4/edit

UPD 2013-04-16

我刚刚意识到这是一个假冒的东西。 / p>

在CSS中，上边距和下边距的百分比是指容器的宽度。因此，上面的示例仅适用于容器为正方形的情况。

I use sass and compass in my RoR project. I need to assign to the top CSS property of an element the value, which is element height divide by -2. Can I do it with SASS \ Compass?

解决方案

You seem to have got the XY problem. You have a task to solve, and instead of asking us about the task, you ask about a solution that you tried and already found inappropriate.

Why do you want to apply the top property equal to half of element's height and negated? Because you want to move an absolutely positioned element half its height up. This is the original task.

There's a simple solution to achieve that, and SASS is not even necessary! (Actually, as long as you don't know element's height, SASS can't provide more help than CSS.)

We'll need an extra wrapper:

<div class=container>
  <div class=elements-wrapper>
    <div class=element>
    </div>
  </div>
</div>

To push the element up for 50% of its height, do two simple steps:

1) Push its wrapper up fully out of the container:

.elements-wrapper {
  position: absolute;
  bottom: 100%; }

2) Now pull the element down for 50% of its height:

.element {
  margin-bottom: -50%; }

That's it!

When you do margin-bottom: -50%, you actually pull the element 50% down of its wrapper's height. But the wrapper's height it equal to the element's height!

Don't forget to apply position: relative to the container, otherwise position: absolute will relative to the window, not the container.

Here's a demo with well-commented code: http://jsbin.com/uwunal/4/edit

UPD 2013-04-16

I've just realised that this is a phony.

In CSS the percentages of top and bottom margins refer to the width of the container. So the above example only works because the container is square.

这篇关于我可以通过SASS \ Compass计算和使用元素高度吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！