Skip to content

Instantly share code, notes, and snippets.

@web-zen

web-zen/SassMeister-input-HTML.html

Created January 13, 2014 18:11
Show Gist options
  • Save web-zen/8405138 to your computer and use it in GitHub Desktop.
Save web-zen/8405138 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html>
<header id="header">
<meta charset="utf-8" />
<title>My Compass Page</title>
</header>
<body class="wrapper">
<p>page</p>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Breakpoint (v2.4.1)
// Singularity.gs (v1.2.0.rc.1)
// ----
@import 'compass';
@import 'singularitygs';
@import 'breakpoint';
/*Example 1 Sass*/
$fontsize1: 30px;
$fontsize2: 50px;
$fontsize3: 60px;
$basic: 600px;
$pair: 800px 1200px;
.wrapper {
p {font-size: $fontsize1;}
@include breakpoint($basic) {
p {font-size: $fontsize2;}
}
@include breakpoint($pair) {
p {font-size: $fontsize3;}
}
}
//$grids: 6;
//$gutters: 1/3;
html, body{
margin: 0;
padding: 0;
height: 100px;
}
Raw
SassMeister-output.css
/*Example 1 Sass*/
.wrapper p {
font-size: 30px;
}
@media (min-width: 600px) {
.wrapper p {
font-size: 50px;
}
}
@media (min-width: 800px) and (max-width: 1200px) {
.wrapper p {
font-size: 60px;
}
}
html, body {
margin: 0;
padding: 0;
height: 100px;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html>
<header id="header">
<meta charset="utf-8" />
<title>My Compass Page</title>
</header>
<body class="wrapper">
<p>page</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment