الحشو المناسب للعناصر المتداخلة مع سوزي 2
-
02-01-2020 - |
سؤال
أحاول بناء تخطيط متداخل بسيط مع سوزي 2:حاوية مع عمودين (الأطفال) ، مع كل عمود الطفل تحتوي على نسخة واثنين من الأعمدة المتداخلة (أحفاد).
ألاحظ أن أعمدة الأحفاد لها مزاريب خاصة بها وبالتالي فإن محتواها لا يتماشى مع مزاريب والديهم.
من الناحية المثالية ، يمتد الأحفاد (وألوان خلفيتهم) إلى العرض الكامل للعنصر الفرعي.
ما هو أفضل نهج لتحقيق ذلك?
جوهر: https://gist.github.com/andreimoment/2a734aa4a0e99b2866e9
أتش تي أم أل:
<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
في أي وقت تريد سوزي لعدم إخراج المزاريب-ولكن nest
هو أكثر وضوحا لغويا في هذه الحالة.
ملاحظة:أنت أيضا لا تحتاج إلى استخدام first
مع inside
أو split
المزاريب.أنت لا الحاجة last
إما ، ولكن يمكن أن يساعد في بعض مشكلات تقريب البكسل الفرعي.هذه لا تؤذي أي شيء ، ولكن يمكنك إسقاطها دون التسبب في ضرر.