Параметр $susy global-box-sizing ничего не меняет в Susy2.

Это то, чего я никогда не понимал в Susy 2.

Глядя на этот простой пример, видно:

http://codepen.io/itsthomas/pen/Btzxa

HTML:

<div id="wrapper">
  <div id="content">
    <div class="box1">Box1</div>
    <div class="box1">Box1</div>
    <div class="box1">Box1</div>
  </div>
  <aside>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>  
  </aside>
</div>

SASS:

@import 'susy';
@include border-box-sizing;

$susy: (
  container: 90%,
  columns: 24,
  gutters: 1/3,
  /* global-box-sizing: border-box, */
  debug: (
    image: show,
    output: overlay,
  ),
);

#wrapper {
  @include container;
}

#content {
  @include span(18 first);
  background-color: red;
  height: 100px;
  padding: gutter();
}

aside {
  @include span(6 last);
  background-color: #F0A754;
  padding: gutter();
}

.box1 {
  @include span(6 of 18);
  height: 40px;
  background-color: #6D4214;
  &:last-child {
    /* margin-right: 0; */
    @include last;
  }
}

что добавление global-box-sizing: border-box к карте $susy вообще ничего не меняет, независимо от того, используете ли вы @include border-box-sizing; в вашем коде или нет.

Настройка $susy global-box-sizing кажется мне совершенно бесполезной. Или я что-то упускаю?

Спасибо


susy
person HomTom    schedule 21.12.2014    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Это верно. global-box-sizing на самом деле является описательным, а не предписывающим. Он сообщает Susy, как вы установили свой глобальный бордюр. По умолчанию для него установлено значение content-box (значение браузера по умолчанию, а миксин border-box-sizing автоматически установит для вас значение border-box. Единственный раз, когда вам нужно изменить этот параметр вручную, это если вы установите глобальный размер блока вручную.

Susy нужно знать, какую блочную модель вы используете, потому что она изменяет математику для определенных типов сетки и функциональности — везде, где отступы и ширина могут взаимодействовать, например, inside/inside-static желоба или bleed. В вашем коде может не быть ни одной из этих ситуаций, и в этом случае этот параметр не имеет значения.

person Miriam Suzanne    schedule 23.12.2014
comment
Спасибо за ваш ответ. Но я хочу сказать, что, как и в моем примере выше, если вы вообще не используете примесь border-box-sizing, а измените только глобальную настройку $susy global-box-sizing на border-box, эта настройка ни на что не повлияет. Я имею в виду, что если изменение глобального размера внутри карты $susy ничего не меняет, то почему оно там? - person HomTom; 23.12.2014
comment
Спасибо за объяснение. Это сводило меня с ума на пару дней :) - person Ketan; 04.10.2015