CODEWITHSUNDEEP
csssasscompass-sass
Dmitry Belaventsev
Dmitry Belaventsev

Reputation: 6657

Can I calculate and use element height with SASS \ Compass

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?

Upvotes: 11

Views: 72119

Answers (4)

reddtoric
reddtoric

Reputation: 686

Alternative solution that doesn't use position absolute:
In my case, I couldn't use position absolute because it messes up the children elements that uses display flex. What I was able to do was have my wrapper have a height of 100% in the space I want vertically centered. Note: my children elements are already horizontally centered.

Precondition:
In order for this solution to work, the wrapper must have a height of 100% in the space you want to center vertically. For example, I want it vertically centered in relation to the window height, so the wrapper has to be the same as the window height.

Structure:

<div class="elements-wrapper">
  <div class="element"> <!-- in my case, this is a container -->
    <!-- in my case, x numbers of display flex elements here-->
  </div>
</div>

With the wrapper at a height of 100%, translate it 50% down.

.elements-wrapper {
  height: 100%;
  transform: translate(0, 50%);
}

And then, translate the element 50% up.

.element {
  transform: translate(0, -50%);
}

With this, the element can be any size and you don't have to mess with the CSS every time like when, in my case, changing the size by adding children elements to it.

*Had a problem where my element-wrapper was blocking pointer events in the 50% that was shifted down so I fixed that by adding these rules:

.elements-wrapper {
  pointer-events: none;
}
.element{
  pointer-events: initial;
}

Upvotes: 1

pdiddy
pdiddy

Reputation: 6297

I have found a good way of doing this. It is using the transform: translate(-50%, -50%)

here a link detailing the solution : Centering element

Upvotes: 4

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23883

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.

Upvotes: 22

Eli
Eli

Reputation: 14827

Try this:

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

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

Upvotes: 3

Related Questions