Skip to content

Instantly share code, notes, and snippets.

@melissamcewen

melissamcewen/SassMeister-input-HTML.html

Created October 16, 2015 20:55
Show Gist options
  • Save melissamcewen/8a770500ee6269cc4243 to your computer and use it in GitHub Desktop.
Save melissamcewen/8a770500ee6269cc4243 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html lang="de">
<head>
</head>
<body>
<div id="div-1">1</div>
<div id="div-2">2</div>
<div id="div-3">3</div>
<div id="div-4">4</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@import "breakpoint";
@import "singularitygs";
@include add-grid(4);
#div-1 {
@include isolation-span(2, 1, left);
background-color: red;
}
#div-2 {
@include isolation-span(2, 1, left);
background-color: blue;
}
#div-3 {
@include isolation-span(2, 1, left);
background-color: yellow;
}
#div-4 {
@include isolation-span(2, 3, right);
background-color: green;
}
Raw
SassMeister-output.css
#div-1 {
width: 47.36842%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: left;
background-color: red;
}
#div-2 {
width: 47.36842%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: left;
background-color: blue;
}
#div-3 {
width: 47.36842%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: left;
background-color: yellow;
}
#div-4 {
width: 47.36842%;
float: right;
margin-left: 0;
margin-right: 0;
clear: right;
background-color: green;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html lang="de">
<head>
</head>
<body>
<div id="div-1">1</div>
<div id="div-2">2</div>
<div id="div-3">3</div>
<div id="div-4">4</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment