2014-08-30 4 views
2

У меня есть сетка из трех столбцов, и функция +span хорошо работает для определения столбцов. Так что, если я хочу элемент, чтобы охватить одну колонку я:Как получить местоположение Susy Sass и выровнять элемент в центральном столбце

+span(1 of 3) 

и два:

+span(2 of 3) 

и т.д ..

Я бы сейчас, как у элемента, чтобы охватить один столбец, но в позиция 2, то есть в средней колонке.

суперсимметрии документации говорит использовать at ключевое слово, чтобы указать местоположение, как это:

+span(1 at 2 of 3) 

Однако, это не работает, и моя колонка находится на первой позиции т.е. слева.

в результате CSS:

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

Когда я

+span(1 at 3 of 3) 

в результате CSS:

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

это работает правильно и моя колонка находится в третьей позиции.

Как я могу сделать работу с местоположением, чтобы моя колонка была в положении два?

Некоторые изображения, чтобы помочь объяснить:

В первой колонке:

enter image description here

На колонке 3:

enter image description here

Что я хочу:

enter image description here

Этот последний пример был достигнут с:

float: none 
margin: 0 auto 

Я считаю, что это хак, и это также означает, что высота теперь не так, как нет поплавка. Я не думаю, что так вы должны работать с Сьюзи.

Версии:

Compass 1.0.1 Susy 2.1.3

Я использую .sass файлы, не .scss

ответ

5

at ключевое слово работает только поместить элемент если вы используете isolation.Это связано с тем, что размещение зависит от контекста - элементы плавают по отношению к другим элементам - и у Сьюзи нет способа узнать, какие другие элементы существуют. Изоляция фиксирует это, позиционируя каждый элемент с левого края. Таким образом, один из вариантов заключается в использовании +span(1 at 2 of 3 isolate).

Это не обязательно лучший вариант. Для простого перемещения элементов в разные положения я использовал бы смесители push и pull.

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

push Mixin добавляет любое количество столбцов (или произвольный промежуток) в полях до данного элемента - толкая его от того, где это было бы.