Разные желоба с Susy Sass

У меня есть эти настройки Susy:

$susy: (
  columns: 8,
  gutters: 1/4,  
  global-box-sizing: border-box,   
);

Иногда мне нужны разные желоба вместо 1/4.

См. изображение, например:

введите здесь описание изображения

И код:

.wrap {  
  @include clearfix; 
  @include container (500px); 

  .box-1 {
    @include span(4 of 8);
  }
  .box-2 {
    @include span(4 of 8 last);
  }
  .box-3 {
    @include span(4 of 8 wide no-gutter);
  }
  .box-4 {
    @include span(4 of 8 last);
  }

  .box-5 {
    @include span(3.95 of 8 wide no-gutter);
  }

  .box-6 {
    @include span(4 of 8 last);
  }
}

Я пробовал это без успеха:

@include span(4 of 8 wide (gutter-override: 2px));

Я нашел способ исправить это, но нет, если это правильно

@include span(3.95 of 8 wide no-gutter);

Спасибо


sass compass susy-compass susy
person kurtko    schedule 04.06.2015    source источник
comment
Какой результат вы получили от @include span(4 of 5 wide (gutter-override: 2px)); и чего вы ожидали?   -  person Miriam Suzanne    schedule 04.06.2015
comment
Я получаю width: 83.33333%; float: left; margin-right: 2px;, что похоже на то, что я ожидал.   -  person Miriam Suzanne    schedule 04.06.2015
comment
С @include span(2 of 4 wide (gutter-override: 2px)); я получаю: width: 52.63158%;float: left;margin-right: 2px; затем блок 6 перемещается вниз, мне нужно width: 51.31579%;float: left;   -  person kurtko    schedule 05.06.2015

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете изменить макет следующим образом

@include with-layout(12 1/8 fluid float after) {

  .box-5 {
    @include span(2 of 12);
  }

  .box-6 {
    @include span(10 of 12 last);
  }

}

Где 1/8 – это ширина желоба.

person Bazinga    schedule 04.06.2015
comment
Вы имеете в виду: .box-5 {@include gutters(3em);@include span(2 of 4);} ?? да, коробка-5 меняет желоб, но коробка-6 смещается вниз, потому что не меняет свою ширину - person kurtko; 05.06.2015

arrow_upward
0
arrow_downward

Другое решение:

.box-5 {
   float:left;
   width: span(4 of 8 wide) - 1%;
}

.box-6 {
   float:right;
   width: span(4 of 8);
}
person kurtko    schedule 08.06.2015