Skip to content

Instantly share code, notes, and snippets.

@tsmith512

tsmith512/SassMeister-input-HTML.html

Last active February 25, 2016 18:45
Show Gist options
  • Save tsmith512/419d8416616fbf6bd99f to your computer and use it in GitHub Desktop.
Save tsmith512/419d8416616fbf6bd99f to your computer and use it in GitHub Desktop.
Download ZIP
Intro to Singularity: Gist for Calc Output Example
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<div class="wrap">
<div class="a">300px</div>
<div class="b">1</div>
<div class="c">2</div>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@import "toolkit";
@import "toolkit/kickstart";
@import "singularitygs";
@import "singularity-extras";
@import "singularity-extras/outputs";
// Debug mode doesn't work with the Calc output style.
// @include sgs-change('debug', true);
@include add-grid(300px 1 2);
@include add-gutter(1em);
@include sgs-change('output', 'calc');
.wrap {
@include clearfix;
width: 960px;
border: 1px solid black;
// Doesn't work with the calc output style
// @include background-grid($color: #ccc);
.a {
@include grid-span(1,1);
background: red;
height: 100px;
}
.b {
@include grid-span(1,2);
background: red;
height: 100px;
}
.c {
@include grid-span(1,3);
background: red;
height: 100px;
}
}
@-webkit-keyframes swing {
0% { width: 400px; }
50% { width: 900px; }
100% { width: 400px; }
}
@-moz-keyframes swing {
0% { width: 400px; }
50% { width: 900px; }
100% { width: 400px; }
}
@-o-keyframes swing {
0% { width: 400px; }
50% { width: 900px; }
100% { width: 400px; }
}
@keyframes swing {
0% { width: 400px; }
50% { width: 900px; }
100% { width: 400px; }
}
.wrap {
-webkit-animation: swing 5s infinite; /* Safari 4+ */
-moz-animation: swing 5s infinite; /* Fx 5+ */
-o-animation: swing 5s infinite; /* Opera 12+ */
animation: swing 5s infinite; /* IE 10+, Fx 29+ */
}
Raw
SassMeister-output.css
*, *:before, *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img, video {
max-width: 100%;
height: auto;
}
.wrap {
width: 960px;
border: 1px solid black;
}
.wrap:after {
content: "";
display: table;
clear: both;
}
.wrap .a {
width: 300px;
float: left;
margin-right: -100%;
margin-left: 0;
background: red;
height: 100px;
}
.wrap .b {
width: -webkit-calc((((100% - (300px + 2em)) / (3))) * 1);
width: calc((((100% - (300px + 2em)) / (3))) * 1);
float: left;
margin-right: -100%;
margin-left: -webkit-calc((300px + 1em));
margin-left: calc((300px + 1em));
background: red;
height: 100px;
}
.wrap .c {
width: -webkit-calc((((100% - (300px + 2em)) / (3))) * 2);
width: calc((((100% - (300px + 2em)) / (3))) * 2);
float: right;
margin-left: 0;
margin-right: 0;
background: red;
height: 100px;
}
@-webkit-keyframes swing {
0% {
width: 400px;
}
50% {
width: 900px;
}
100% {
width: 400px;
}
}
@-moz-keyframes swing {
0% {
width: 400px;
}
50% {
width: 900px;
}
100% {
width: 400px;
}
}
@-o-keyframes swing {
0% {
width: 400px;
}
50% {
width: 900px;
}
100% {
width: 400px;
}
}
@keyframes swing {
0% {
width: 400px;
}
50% {
width: 900px;
}
100% {
width: 400px;
}
}
.wrap {
-webkit-animation: swing 5s infinite;
/* Safari 4+ */
-moz-animation: swing 5s infinite;
/* Fx 5+ */
-o-animation: swing 5s infinite;
/* Opera 12+ */
animation: swing 5s infinite;
/* IE 10+, Fx 29+ */
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<div class="wrap">
<div class="a">300px</div>
<div class="b">1</div>
<div class="c">2</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment