跨越 6 个项目的 Susy Grid 问题
Susy Grid Issue with spanning 6 items
我的 12 项横跨 2 行 6 项时遇到了一些问题。
我在 "artist" 部分遇到问题。我不确定我是应该为此使用图库混合还是像其他部分一样使用 span。
http://codepen.io/anon/pen/pNjqzw
HTML:
<html>
<body>
<header>
<div class="container">
<h1>SMEDC 2017</h1>
</div>
</header>
<div class="container">
<div class="rooms">
<h1 class="title">Rooms</h1>
<div class="room"></div>
<div class="room"></div>
<div class="room"></div>
</div>
<div class="packages">
<h1 class="title">Packages</h1>
<div class="package"></div>
<div class="package"></div>
<div class="package"></div>
<div class="package"></div>
</div>
<div class="artists">
<h1 class="title">Artists</h1>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
</div>
</div>
<footer>
<div class="test">Powered by Smeazy</div>
</footer>
</body>
</html>
SASS:
@import "susy";
$susy: ( columns: 12,
gutters: 1/4,
global-box-sizing: border-box,
debug:(image:show)
);
// Colours
$color-primary: #38a1d6;
$color-secondary: #16f4d0;
$color-tertiary: #fcee21;
$color-grey: #a1acb5;
$color-grey-light: #dce8ef;
$color-grey-dark: #333;
$default-font: edc_font;
@font-face {
font-family: 'edc_font';
src: url('../fonts/lemonmilk-webfont.woff2') format('woff2'), url('f../onts/lemonmilk-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
%clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
header h1 {
font-family: $default-font;
text-align: center;
font-size: 3.5rem;
margin: 0;
}
.title {
font-family: $default-font;
text-align: center;
font-size: 3rem;
margin: 0;
}
.container {
@include container();
}
header {
background-color: $color-primary;
height: auto;
}
.rooms {
.room {
@include span (4);
height: 10rem;
background: green;
&:last-child {
@include span (4 last);
}
}
}
.packages {
.package {
@include span (3);
height: 10rem;
background: red;
&:last-child {
@include span (3 last);
}
}
}
.artists {
.artist {
@include span (2);
height: 10rem;
background: pink;
&:last-child {
@include span (2 last);
}
}
}
footer {
background-color: $color-grey;
height: auto;
font-family: $default-font;
text-align: center;
padding: gutter();
}
当前的问题是 :last-child
选择容器中的最后一个元素(艺术家 #12),而不是一行中的最后一个元素(#6 和 #12)。 Last-child 由 DOM 树决定,而不是布局。
gallery mixin 在这里非常有用。它还使用 DOM-based nth-
选择器,但更直接地应用它们。由于容器中有一个 h1
标题以及所有艺术家,因此您必须打开 nth-of-type
选项:
.artist {
// each item spans 2 columns
// items are targeted by sibling-position (nth) and type (div)
@include gallery (2, of-type);
height:10rem;
background:pink;
}
我的 12 项横跨 2 行 6 项时遇到了一些问题。
我在 "artist" 部分遇到问题。我不确定我是应该为此使用图库混合还是像其他部分一样使用 span。
http://codepen.io/anon/pen/pNjqzw
HTML:
<html>
<body>
<header>
<div class="container">
<h1>SMEDC 2017</h1>
</div>
</header>
<div class="container">
<div class="rooms">
<h1 class="title">Rooms</h1>
<div class="room"></div>
<div class="room"></div>
<div class="room"></div>
</div>
<div class="packages">
<h1 class="title">Packages</h1>
<div class="package"></div>
<div class="package"></div>
<div class="package"></div>
<div class="package"></div>
</div>
<div class="artists">
<h1 class="title">Artists</h1>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
</div>
</div>
<footer>
<div class="test">Powered by Smeazy</div>
</footer>
</body>
</html>
SASS:
@import "susy";
$susy: ( columns: 12,
gutters: 1/4,
global-box-sizing: border-box,
debug:(image:show)
);
// Colours
$color-primary: #38a1d6;
$color-secondary: #16f4d0;
$color-tertiary: #fcee21;
$color-grey: #a1acb5;
$color-grey-light: #dce8ef;
$color-grey-dark: #333;
$default-font: edc_font;
@font-face {
font-family: 'edc_font';
src: url('../fonts/lemonmilk-webfont.woff2') format('woff2'), url('f../onts/lemonmilk-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
%clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
header h1 {
font-family: $default-font;
text-align: center;
font-size: 3.5rem;
margin: 0;
}
.title {
font-family: $default-font;
text-align: center;
font-size: 3rem;
margin: 0;
}
.container {
@include container();
}
header {
background-color: $color-primary;
height: auto;
}
.rooms {
.room {
@include span (4);
height: 10rem;
background: green;
&:last-child {
@include span (4 last);
}
}
}
.packages {
.package {
@include span (3);
height: 10rem;
background: red;
&:last-child {
@include span (3 last);
}
}
}
.artists {
.artist {
@include span (2);
height: 10rem;
background: pink;
&:last-child {
@include span (2 last);
}
}
}
footer {
background-color: $color-grey;
height: auto;
font-family: $default-font;
text-align: center;
padding: gutter();
}
当前的问题是 :last-child
选择容器中的最后一个元素(艺术家 #12),而不是一行中的最后一个元素(#6 和 #12)。 Last-child 由 DOM 树决定,而不是布局。
gallery mixin 在这里非常有用。它还使用 DOM-based nth-
选择器,但更直接地应用它们。由于容器中有一个 h1
标题以及所有艺术家,因此您必须打开 nth-of-type
选项:
.artist {
// each item spans 2 columns
// items are targeted by sibling-position (nth) and type (div)
@include gallery (2, of-type);
height:10rem;
background:pink;
}