web-dev-qa-db-ja.com

SASS \ Compassで要素の高さを計算して使用できますか

RoRプロジェクトではsassとcompassを使用しています。要素のtop CSSプロパティに値を割り当てる必要があります。値は、要素の高さを-2で除算したものです。 SASS\Compassでできますか？

csscss3sasscompass-sass
9
Dmitry Belaventsev

XY問題 があるようです。解決すべき課題があり、その課題について私たちに尋ねるのではなく、試行してすでに不適切であるとわかった解決策について尋ねます。

なぜ、要素の高さの半分に等しいtopプロパティを適用して無効にするのですか？ 絶対位置にある要素をその高さの半分だけ上に移動したいので。これは元のタスクです。

それを達成するための簡単な解決策があり、SASSも必要ありません！ （実際には、要素の高さがわからない限り、SASSはCSSより多くのヘルプを提供できません。）

追加のラッパーが必要になります。

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

要素をその高さの50％押し上げるには、2つの簡単な手順を実行します。

1）ラッパーをコンテナーから完全に押し出します。

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

2）次に、要素をその高さの50％引き下げます。

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

それでおしまい！

あなたがするときmargin-bottom: -50%、実際には、要素をそのラッパーの高さから50％引き下げます。ただし、ラッパーの高さは要素の高さと同じです。

適用することを忘れないでくださいposition: relativeをコンテナに、それ以外の場合はposition: absoluteは、コンテナではなくウィンドウに相対的です。

これは、よくコメントされたコードのdemoです： http://jsbin.com/uwunal/4/edit

UPD 2013-04-16

私はこれが偽物であることを認識しました。

CSSでは、上部マージンと下部マージンのパーセンテージは、コンテナーのwidthを指します。したがって、上記の例は、コンテナが正方形であるためにのみ機能します。

19
Andrey Mikhaylov - lolmaus

私はこれを行う良い方法を見つけました。 transform: translate(-50%, -50%)を使用しています

ここにソリューションの詳細リンク： Centering element

4
pdiddy

これを試して：

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

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