Skip to content

Instantly share code, notes, and snippets.

@tsmith512

tsmith512/SassMeister-input-HTML.html

Last active August 29, 2015 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tsmith512/61f4e2ef4d1dd08f4297 to your computer and use it in GitHub Desktop.
Save tsmith512/61f4e2ef4d1dd08f4297 to your computer and use it in GitHub Desktop.
Download ZIP
For Kevin
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Related Content</h1>
<div class="view-related-content">
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
</div>
<h1>Sponsors</h1>
<div class="view-sponsors">
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Toolkit (v2.7.0)
// ----
@import 'compass';
@import 'breakpoint';
@import 'toolkit';
@import 'toolkit/kickstart';
$list-medium: 500px;
$list-large: 1000px;
%view-two-column-list {
@include clearfix;
.item {
@include breakpoint($list-large) {
width: 50%;
float: left;
}
}
}
%view-three-column-list {
@include clearfix;
.item {
@include breakpoint($list-medium) {
width: 50%;
float: left;
}
@include breakpoint($list-large) {
width:33.33%;
}
}
}
.view-related-content {
@extend %view-two-column-list;
}
.view-sponsors {
@extend %view-three-column-list;
}
.item {
padding: 1em;
border: 1px solid grey;
}
Raw
SassMeister-output.css
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
img, video {
max-width: 100%;
height: auto;
}
.view-related-content:after {
content: "";
display: table;
clear: both;
}
@media (min-width: 1000px) {
.view-related-content .item {
width: 50%;
float: left;
}
}
.view-sponsors:after {
content: "";
display: table;
clear: both;
}
@media (min-width: 500px) {
.view-sponsors .item {
width: 50%;
float: left;
}
}
@media (min-width: 1000px) {
.view-sponsors .item {
width: 33.33%;
}
}
.item {
padding: 1em;
border: 1px solid grey;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Related Content</h1>
<div class="view-related-content">
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
</div>
<h1>Sponsors</h1>
<div class="view-sponsors">
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment