Skip to content

Instantly share code, notes, and snippets.

@pepelsbey

pepelsbey/SassMeister-input-HTML.html

Created May 6, 2014 21:08
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 pepelsbey/b9327760a0a69012020e to your computer and use it in GitHub Desktop.
Save pepelsbey/b9327760a0a69012020e to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="block-one">
<div class="block-one__element"></div>
</div>
<div class="block-two">
<div class="block-two__element"></div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// Singularity.gs (v)
// ----
@import "singularitygs";
@include add-grid(3);
@include add-gutter(1/2);
.block-one {
@include grid-span(2, 1);
clear:both;
height:5em;
background:#EEE;
&__element {
// No context
margin-left:gutter-span();
height:5em;
background:#AAA;
}
}
.block-two {
@include grid-span(2, 1);
clear:both;
height:5em;
background:#EEE;
&__element {
// Context
margin-left:gutter-span(false, 2);
height:5em;
background:#AAA;
}
}
Raw
SassMeister-output.css
.block-one {
width: 62.5%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
clear: both;
height: 5em;
background: #EEE;
}
.block-one__element {
margin-left: 12.5%;
height: 5em;
background: #AAA;
}
.block-two {
width: 62.5%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
clear: both;
height: 5em;
background: #EEE;
}
.block-two__element {
margin-left: 20%;
height: 5em;
background: #AAA;
}
Raw
SassMeister-rendered.html
<div class="block-one">
<div class="block-one__element"></div>
</div>
<div class="block-two">
<div class="block-two__element"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment