Skip to content

Instantly share code, notes, and snippets.

@WolfieZero

WolfieZero/SassMeister-input-HTML.html

Created February 25, 2015 14:12
Show Gist options
  • Save WolfieZero/f4a2ace42a01c5293364 to your computer and use it in GitHub Desktop.
Save WolfieZero/f4a2ace42a01c5293364 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="container">
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
</div>
<div class="container">
<div class="col col--3">3</div>
<div class="col col--3">3</div>
<div class="col col--3">3</div>
<div class="col col--3">3</div>
</div>
<div class="container">
<div class="col col--4">4</div>
<div class="col col--4">4</div>
<div class="col col--4">4</div>
</div>
<div class="container">
<div class="col col--5">5</div>
<div class="col col--5">5</div>
</div>
<div class="container">
<div class="col col--6">6</div>
<div class="col col--6">6</div>
</div>
<div class="container">
<div class="col col--7">7</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--8">8</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--9">9</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--10">10</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--11">11</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--12">12</div>
</div>
<div class="container">
<div class="col col--12">
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
@mixin clearfix {
&:before,
&:after {
content: ' ';
display: table;
}
&:after {
clear: both;
}
}
div {
text-align: center;
}
.container {
background-color: #000;
margin-bottom: 1em;
}
.col {
background-color: #A65587;
.col {
background-color: #205560;
}
}
//-------------------------------------------------
$grid--cols: 12;
$grid--width: 62em;
$grid--gutter: 1em;
$grid--export: true;
$grid--end-gutters: false;
@function gutter($size: $grid--gutter) {
@if $size > 0 {
$width: $grid--width;
@return percentage($size / $width);
} @else {
@return 0;
}
}
.container {
width: $grid--width;
margin-left: auto;
margin-right: auto;
@include clearfix;
.container {
width: 100%;
}
}
.col {
display: block;
float: left;
@if $grid--gutter > 0 {
$gutter: (gutter() / 2);
margin-left: $gutter;
margin-right: $gutter;
@if $grid--end-gutters {
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
}
@mixin col($num) {
$width: percentage($num / 12) - gutter();
$end-gutter: 0;
@if $grid--end-gutters {
$end-gutter: ((gutter() / 12) * $num);
}
width: ($width + $end-gutter);
}
@if $grid--export {
@for $i from 1 through $grid--cols {
.col--#{$i} {
@include col($i);
}
}
}
Raw
SassMeister-output.css
div {
text-align: center;
}
.container {
background-color: #000;
margin-bottom: 1em;
}
.col {
background-color: #A65587;
}
.col .col {
background-color: #205560;
}
.container {
width: 62em;
margin-left: auto;
margin-right: auto;
}
.container:before, .container:after {
content: ' ';
display: table;
}
.container:after {
clear: both;
}
.container .container {
width: 100%;
}
.col {
display: block;
float: left;
margin-left: 0.80645%;
margin-right: 0.80645%;
}
.col--1 {
width: 6.72043%;
}
.col--2 {
width: 15.05376%;
}
.col--3 {
width: 23.3871%;
}
.col--4 {
width: 31.72043%;
}
.col--5 {
width: 40.05376%;
}
.col--6 {
width: 48.3871%;
}
.col--7 {
width: 56.72043%;
}
.col--8 {
width: 65.05376%;
}
.col--9 {
width: 73.3871%;
}
.col--10 {
width: 81.72043%;
}
.col--11 {
width: 90.05376%;
}
.col--12 {
width: 98.3871%;
}
Raw
SassMeister-rendered.html
<div class="container">
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
</div>
<div class="container">
<div class="col col--3">3</div>
<div class="col col--3">3</div>
<div class="col col--3">3</div>
<div class="col col--3">3</div>
</div>
<div class="container">
<div class="col col--4">4</div>
<div class="col col--4">4</div>
<div class="col col--4">4</div>
</div>
<div class="container">
<div class="col col--5">5</div>
<div class="col col--5">5</div>
</div>
<div class="container">
<div class="col col--6">6</div>
<div class="col col--6">6</div>
</div>
<div class="container">
<div class="col col--7">7</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--8">8</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--9">9</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--10">10</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--11">11</div>
<div class="col col--1">1</div>
</div>
<div class="container">
<div class="col col--12">12</div>
</div>
<div class="container">
<div class="col col--12">
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment