Могу ли я рассчитать и использовать высоту элемента с Sass Compass

Я использую sass и compass в моем проекте RoR. Мне нужно назначить top CSS свойство элемента значение, которое является высота элемента делить на -2. Могу ли я сделать это с помощью Sass Compass?

8
compass-sass css css3 sass

3 ответов

Вы, кажется, получили XY проблема. У вас есть задача для решения, и вместо того, чтобы спрашивать нас о задаче, вы спрашиваете о решении, которое вы пробовали и уже нашли неуместным.

почему вы хотите, чтобы применить top свойство, равное половине высоты элемента и отрицаемое? Потому что вы хотите переместить абсолютно позиционированный элемент на половину его высоты вверх. Это первоначальная задача.

есть простое решение для достижения этого, а Сасс даже не нужна! (На самом деле, пока вы не знаете высоту элемента, SASS не может предоставить больше помощи, чем CSS.)

нам понадобится дополнительная обертка: 

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

чтобы поднять элемент на 50% его высоты, выполните два простых шага:

1) Нажмите полностью обертки из контейнера: 

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

2) теперь потяните элемент вниз на 50% его высоты:

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

вот именно!

когда вы margin-bottom: -50%, вы фактически тянете элемент на 50% вниз от его wrapper и высота. Но высота обертки равна высоте элемента!

Не забудьте применить position: relative в контейнер, в противном случае position: absolute будет относительно окна, а не контейнер.

здесь демо С хорошо прокомментированным кодом:http://jsbin.com/uwunal/4/edit

UPD 2013-04-16

Я только что понял, что это фальшивый.

в CSS проценты верхнего и нижнего полей относятся к ширина контейнера. Так что приведенный выше пример работает только потому, что контейнер квадратный.

18

Я нашел хороший способ сделать это. Он использует transform: translate(-50%, -50%)

здесь ссылка, детализирующая решение:центрирующий элемент

4

попробуйте это:

@mixin flexible-top($elementHeight) {
    top: ($elementHeight / (-2));
}

.yourElement {
    @include flexible-top(yourElementHeight); 
}
3