Susy 2: цвет фона на ближайшем желобе

Хорошо, во-первых, я попытался показать проблему с Sassmeister, но она так... медленно компилируется, что я просто сдался. Я использую Susy, SCSS и Haml.

вопрос

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

Вот мой код:

HTML:

<div class="page">
  <div class="nav">
    <div class="brand">
      <a class="name" href="/">Tomasz Gałkowski</a>
    </div>
    <div class="work">
      <a class="projects" href="#">projects</a>
      <a class="timeline" href="#">timeline</a>
    </div>
    <div class="blog">
      <a class="articles" href="#">articles</a>
      <a class="about" href="#">about me</a>
      <a class="contact" href="#">contact</a>
    </div>
  </div>
  <div class="content">
    <div class="header">
      <h1>Tomasz Gałkowski</h1>
      <h2>web developer</h2>
    </div>
    <div class="main">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="footer">
      <small>Tomasz Gałkowski, 2016</small>
      <p>gitlab, facebook, twitter</p>
    </div>
  </div>
</div>

И (соответствующий) SCSS:

$susy: (
  columns: 12,
  gutters: 1/2,
  debug: (image: show)
);

.page {
  @include container;
  @include clearfix; // from compass
}

.nav {
  @include span (3 of 12);
  background: $background-dark;
  height: 100vh;
}

.content {
  @include span(last 9 of 12);
  background: $white;

  .header {
    background: $background-dark;
  }
}

Я пытался кое-что сделать с bleed() или gutters(), но это не сработало так, как я хотел. Я только начинаю изучать Susy, и хотя я просмотрел всю документацию, я не смог понять эту концепцию. :)


css sass susy
person Tomasz Gałkowski    schedule 26.01.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Желоб между элементами nav и .content — это просто отступ между элементами.

сетка

Как показано на рисунке выше, между темно-желтыми и розоватыми элементами есть только поля.

Вы можете добиться наличия $background-dark в качестве фона в описанной вами форме, если добавите фон в оболочку контейнера, будучи .page (это элемент, который вы видите между столбцами) - зеленый элемент на иллюстрации. Поместив затем белый фон на синие элементы, которые вы хотите (.main и .footer), вы в значительной степени будете там.

В зависимости от того, что вам нужно с пространством под .footer, вам может потребоваться немного увеличить его высоту, так как .page будет видно.

Если вы действительно настроены не размещать фон на .page, вы можете использовать псевдоэлемент &:before из .content для наложения поля между столбцами. Если это похоже на лоскутное одеяло, и я бы не рекомендовал его.

person miphe    schedule 27.01.2016
comment
После некоторых исследований я пришел к тому же выводу: то, что я хотел сделать, было анти-паттерном. - person Tomasz Gałkowski; 27.01.2016

arrow_upward
0
arrow_downward

Несмотря на то, что ответ miphe более подробный, я решил добавить и этот, чтобы быть более конкретным. После некоторых исследований я решил, что то, чего я пытался достичь, является анти-шаблоном.

Что я сделал, чтобы получить желаемый результат: я установил фиксированную ширину на боковой панели и использовал .content как @include container; вместо .page и переместил .content вправо, установив padding-left: $sidebar-width, где $sidebar-width — фиксированное значение.

person Tomasz Gałkowski    schedule 27.01.2016