Skip to content

Instantly share code, notes, and snippets.

@maylogger
Created March 17, 2014 17:15
Show Gist options
  • Save maylogger/9603837 to your computer and use it in GitHub Desktop.
Save maylogger/9603837 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
.page
- 8.times do
.column column
// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// Susy (v2.1.1)
// ----
@import "susy";
$susy: layout(1200px (1 2 3 2 1 3 2 1) inside-static);
// 開始寫樣式
.page {
@include container(show);
}
.column {
@include gallery(2);
border: 1px solid rgba(red,.3);
line-height: 100px;
text-align: center;
}
.page {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 7.35294%, rgba(102, 102, 255, 0.25) 7.35294%, rgba(179, 179, 255, 0.25) 20.58824%, rgba(102, 102, 255, 0.25) 20.58824%, rgba(179, 179, 255, 0.25) 39.70588%, rgba(102, 102, 255, 0.25) 39.70588%, rgba(179, 179, 255, 0.25) 52.94118%, rgba(102, 102, 255, 0.25) 52.94118%, rgba(179, 179, 255, 0.25) 60.29412%, rgba(102, 102, 255, 0.25) 60.29412%, rgba(179, 179, 255, 0.25) 79.41176%, rgba(102, 102, 255, 0.25) 79.41176%, rgba(179, 179, 255, 0.25) 92.64706%, rgba(102, 102, 255, 0.25) 92.64706%, rgba(179, 179, 255, 0.25));
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.page::after {
content: " ";
display: block;
clear: both;
}
.column {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: left;
padding-left: 0.73529%;
padding-right: 0.73529%;
border: 1px solid rgba(255, 0, 0, 0.3);
line-height: 100px;
text-align: center;
}
.column:nth-child(4n + 1) {
width: 20.58824%;
margin-left: 0;
margin-right: -100%;
clear: both;
}
.column:nth-child(4n + 2) {
width: 32.35294%;
margin-left: 20.58824%;
margin-right: -100%;
clear: none;
}
.column:nth-child(4n + 3) {
width: 26.47059%;
margin-left: 52.94118%;
margin-right: -100%;
clear: none;
}
.column:nth-child(4n + 4) {
width: 20.58824%;
margin-left: 79.41176%;
margin-right: -100%;
clear: none;
}
<div class='page'>
<div class='column'>column</div>
<div class='column'>column</div>
<div class='column'>column</div>
<div class='column'>column</div>
<div class='column'>column</div>
<div class='column'>column</div>
<div class='column'>column</div>
<div class='column'>column</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment