Skip to content

Instantly share code, notes, and snippets.

@tsmith512

tsmith512/SassMeister-input-HTML.html

Created December 15, 2015 19:40
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/83f41a2ddc13361d267d to your computer and use it in GitHub Desktop.
Save tsmith512/83f41a2ddc13361d267d to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section>
<aside>Howdy</aside>
<aside>Howdy</aside>
<aside>Howdy</aside>
<aside>Howdy</aside>
<aside>Howdy This text is super longHowdy This text is super longHowdy This text is super longHowdy This text is super longHowdy This text is super longHowdy This text is super longHowdy This text is super long</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside>
</section>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.20)
// Compass (v1.0.3)
// Singularity.gs (v1.6.2)
// Toolkit (v2.9.0)
// ----
@import "toolkit";
@import "singularitygs";
@import "toolkit/kickstart";
@include add-grid(3);
@include add-gutter(1/3);
@include layout($gutter:0) {
section {
@include clearfix;
max-width: 800px;
border: 1px solid black;
}
aside {
border: 1px solid red;
padding: 1em;
@include float-span(1,1);
&:nth-child(3n+1) {
border-color:blue;
clear: left;
}
}
}
Raw
SassMeister-output.css
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
embed,
img,
object,
video {
max-width: 100%;
height: auto;
}
section {
max-width: 800px;
border: 1px solid black;
}
section:after {
content: "";
display: table;
clear: both;
}
aside {
border: 1px solid red;
padding: 1em;
width: 33.33333333%;
clear: right;
float: left;
margin-left: 0;
margin-right: 0%;
}
aside:nth-child(3n+1) {
border-color: blue;
clear: left;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section>
<aside>Howdy</aside>
<aside>Howdy</aside>
<aside>Howdy</aside>
<aside>Howdy</aside>
<aside>Howdy This text is super longHowdy This text is super longHowdy This text is super longHowdy This text is super longHowdy This text is super longHowdy This text is super longHowdy This text is super long</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside><aside>Howdy</aside>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment