Susy 2: цвет фона на соседнем желобе

Question

ОК, прежде всего, я попытался показать проблему с 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(), но он просто не работает как я хотел, чтобы он работал. Я только начинаю изучать Сьюзи, и хотя я просканировал всю документацию, я не мог понять эту концепцию. :)

Answer 1

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

Водосточные желоба между элементами nav и .content - это просто разница между элементами.

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

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

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

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

Answer 2

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

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