Skip to content

Instantly share code, notes, and snippets.

@tsmith512

tsmith512/SassMeister-input-HTML.html

Created March 26, 2015 20:55
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/e4d18bba6339694aba6c to your computer and use it in GitHub Desktop.
Save tsmith512/e4d18bba6339694aba6c 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>
<div id="container">
<div class="item1">&nbsp;</div>
<div class="item2">&nbsp;</div>
<div class="item3">&nbsp;</div>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Singularity Extras (v1.0.0)
// Singularity.gs (v1.5.1)
// ----
@import "compass";
@import "breakpoint";
@import "singularitygs";
@import "singularity-extras";
@import "singularity-extras/outputs";
@include add-grid(200px 200px 200px);
@include add-gutter(20px);
@include sgs-change('output', 'calc');
#container {
@include clearfix;
@include box-sizing(border-box);
width: ((200px*3) + (20px*2));
margin: 0 auto;
border: 1px solid black;
}
.item1 {
@include grid-span(1,1);
height: 20px;
background: red;
}
.item2 {
@include grid-span(1,2);
height: 20px;
background: green;
}
.item3 {
@include grid-span(1,3);
height: 20px;
background: blue;
}
Raw
SassMeister-output.css
#container {
overflow: hidden;
*zoom: 1;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 640px;
margin: 0 auto;
border: 1px solid black;
}
.item1 {
width: 200px;
float: left;
margin-right: -100%;
margin-left: 0;
height: 20px;
background: red;
}
.item2 {
width: 200px;
float: left;
margin-right: -100%;
margin-left: -webkit-calc((200px + 20px));
margin-left: calc((200px + 20px));
height: 20px;
background: green;
}
.item3 {
width: 200px;
float: right;
margin-left: 0;
margin-right: 0;
height: 20px;
background: blue;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<div class="item1">&nbsp;</div>
<div class="item2">&nbsp;</div>
<div class="item3">&nbsp;</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment