Skip to content

Instantly share code, notes, and snippets.

@Rudgey84

Rudgey84/SassMeister-input-HTML.html

Created February 4, 2016 09:54
Show Gist options
  • Save Rudgey84/bdf9a4978b1eada6ffbd to your computer and use it in GitHub Desktop.
Save Rudgey84/bdf9a4978b1eada6ffbd to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="lander">
<header>
<h1>Header</h1>
</header>
<div class="main__container">
<div class="main__container--red">
<h2>Main</h2>
</div>
</div>
<div class="sidebar__container">
<div class="sidebar__container--green">
<h2>Sidebar</h2></div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
@import "susy";
$susy: (
flow: ltr, // ltr | rtl
output: float, // float | isolate
math: fluid, // fluid | static (requires column-width)
column-width: 40px, // false | value
container: 940px, // length or % | auto
container-position: center, // left | center | right | <length> [*2] (grid padding)
last-flow: to,
columns: 12,
gutters: 1,
gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
global-box-sizing: content-box, // content-box | border-box (affects inside/inside-static)
debug: (
image: hide,
color: rgba(#66f, .25),
output: background, // background | overlay
toggle: top right,
),
use-custom: (
background-image: true, // look for background-image mixin
background-options: false, // look for background-size, -origin and -clip and other compass/bourbon mixins
box-sizing: true, // look for custom bix sizing mixin
clearfix: false, // true = look for internal clearfix before using micro clearfix
rem: true, // look for rem mixin
)
);
$color1: #FFFFFF;
$color2: red;
$color3: purple;
header {
h1 {
font-size:40px;
color:#333;
}
}
.lander {
@include container;
}
.main {
&__container {
@include span(8);
h2 {
margin:10px;
color:$color1;
}
}
&__container--red {
background-color:$color2;
}
&__area {
margin-bottom: 24px;
}
}
.sidebar {
&__container {
@include span(4 last);
h2 {
margin:10px;
color:$color1;
}
}
&__container--green {
background-color:$color3;
}
}
Raw
SassMeister-output.css
header h1 {
font-size: 40px;
color: #333;
}
.lander {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
.lander:after {
content: " ";
display: block;
clear: both;
}
.main__container {
width: 65.21739%;
float: left;
margin-right: 4.34783%;
}
.main__container h2 {
margin: 10px;
color: #FFFFFF;
}
.main__container--red {
background-color: red;
}
.main__area {
margin-bottom: 24px;
}
.sidebar__container {
width: 30.43478%;
float: right;
margin-right: 0;
}
.sidebar__container h2 {
margin: 10px;
color: #FFFFFF;
}
.sidebar__container--green {
background-color: purple;
}
Raw
SassMeister-rendered.html
<div class="lander">
<header>
<h1>Header</h1>
</header>
<div class="main__container">
<div class="main__container--red">
<h2>Main</h2>
</div>
</div>
<div class="sidebar__container">
<div class="sidebar__container--green">
<h2>Sidebar</h2></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment