CODEWITHSUNDEEP
sasscompass-sasssusy-compasssusy-sasssusy
Rupert
Rupert

Reputation: 1639

How to get Susy Sass location working and align an element to a central column

I have a three column grid and using the +span function works well to define columns. So if I want an element to span one column I do:

+span(1 of 3)

and two:

+span(2 of 3)

etc..

I would now like a an element to span one column but at position 2, i.e in the middle column.

The Susy documentation says to use the at keyword to specify location like this:

+span(1 at 2 of 3)

However, this does not work and my column is at the first position i.e on the left.

resulting css:

width: 30.303030303%;
float: left;
margin-left: 1.5151515152%;
margin-right: 1.5151515152%;

When I do

+span(1 at 3 of 3)

resulting css:

width: 30.303030303%;
float: right;
margin-left: 1.5151515152%;
margin-right: 1.5151515152%;

this works correctly and my column is in the third position.

How can I make the location work to get my column to be at position two?

Some images to help explain:

At column one:

enter image description here

At column 3:

enter image description here

What I want:

enter image description here

This last example was achieved with:

float: none
margin: 0 auto

I consider this a hack and it also means that the height is now wrong as there is no float. I don't think this is how you are supposed to work with Susy.

Versions:

Compass 1.0.1 Susy 2.1.3

I am using .sass files, not .scss

Upvotes: 2

Views: 1208

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

The at keyword only works to place an element if you are using isolation. That's because placement depends on context — items float in relation to other items — and Susy has no way of knowing what other items are around. Isolation fixes that by positioning every element off the left edge. So one option is to use +span(1 at 2 of 3 isolate).

That's not necessarily the best option, though. For simply moving elements around to different positions, I would use the push and pull mixins.

+span(1 of 3)
+push(1)

The push mixin adds any number of columns (or an arbitrary span) as margins before the given element — pushing it from where it would have been.

Upvotes: 5

Related Questions