Правильное заполнение для вложенных элементов с помощью Susy 2
-
02-01-2020 - |
Вопрос
Я пытаюсь создать простой вложенный макет с помощью Susy 2:Контейнер с двумя столбцами (дочерними), каждый из которых содержит копию и два вложенных столбца (внучатые).
Я заметил, что столбцы-внучки имеют свои собственные поля, и поэтому их содержимое не совпадает с полями их родительского элемента.
В идеале внуки (и их цвета фона) должны занимать всю ширину дочернего элемента.
Каков наилучший подход для достижения этой цели?
суть: https://gist.github.com/andreimoment/2a734aa4a0e99b2866e9
HTML:
<div class="parent">
<div class="child">
<p>child 1</p>
<div class="grandchild">Grandchild 1</div>
<div class="grandchild last">Grandchild 2</div>
</div>
<div class="child last">child 2</div>
</div>
СССС:
@import "compass";
@import "susy";
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
$susy: (
columns: 12,
column-width: 4em,
gutters: 1/4,
math: fluid,
output: float,
gutter-position:inside,
global-box-sizing: border-box,
debug: (
image: show,
color: rgba(200,100,100,.3),
output: overlay,
toggle: top right,
),
);
.parent {
@include container();
@include show-grid(background);
padding:0;
@include clearfix;
}
.child {
background-color: rgba(100,100,200, 0.5);
@include span(first 6 of 12);
&.last {
@include span(last 6 of 12);
}
}
.grandchild {
background-color: rgba(100,100,200, 0.5);
@include span(first 3 of 6);
&.last {
@include span(last 3 of 6);
}
}
Решение
Использовать nest
ключевое слово, чтобы сообщить Сюзи, что у диапазона есть дочерние элементы.Это нужно только с inside
и split
желоба — которые вы используете.
@include span(first 6 of 12 nest);
Вы также можете использовать no-gutters
в любой момент, когда вы захотите, чтобы Susy не выводила желоба, но nest
в данном случае является более семантически ясным.
ПРИМЕЧАНИЕ:вам также не нужно использовать first
с inside
или split
желоба.Вы не нуждаться last
либо, но это может помочь с некоторыми проблемами субпиксельного округления.Они ничему не повредят, но вы можете уронить их, не причинив вреда.