Skip to content

Instantly share code, notes, and snippets.

@Phunky

Phunky/SassMeister-input-HTML.html

Created August 20, 2014 10:52
Show Gist options
  • Save Phunky/2c2b61250f162fb6fa00 to your computer and use it in GitHub Desktop.
Save Phunky/2c2b61250f162fb6fa00 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="fg">
<div class="fg-full">
Full
</div>
<div class="fg-half">
Half
</div>
<div class="fg-half">
Half
</div>
<div class="fg-third">
Third
</div>
<div class="fg-third">
Third
</div>
<div class="fg-third">
Third
</div>
<div class="fg-quarter">
Quarter
</div>
<div class="fg-quarter">
Quarter
</div>
<div class="fg-quarter">
Quarter
</div>
<div class="fg-quarter">
Quarter
</div>
<div class="fg-quarter fg--push-sixth">
Quater pushed a sixth
</div>
<div class="fg-quarter fg--push-sixth">
Quater pushed a sixth
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----
$fractions: (
full: 100%,
half: 50%,
third: 33.33%,
quarter: 25%,
fifth: 20%,
sixth: 16%,
seventh: 14.28%,
eighth: 12.5%,
ninth: 11.11%,
tenth: 10%,
eleventh: 9.09%,
twelfth: 8.33%
);
.fg {
display: flex;
flex-flow: row wrap;
width: 100%;
@each $name in map-keys($fractions) {
&-#{$name} {
flex: 0 1 map-get($fractions, $name);
}
&--push-#{$name} {
margin-left: map-get($fractions, $name);
}
}
}
// Debug styles
html, body, .fg {
margin: 0;
padding: 0;
height: 100%;
}
.fg {
@for $i from 1 through 50 {
div:nth-child(#{$i}){
background: rgba(
$i + random(200),
$i + random(200),
$i + random(200),
1
);
}
}
}
Raw
SassMeister-output.css
.fg {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.fg-full {
flex: 0 1 100%;
}
.fg--push-full {
margin-left: 100%;
}
.fg-half {
flex: 0 1 50%;
}
.fg--push-half {
margin-left: 50%;
}
.fg-third {
flex: 0 1 33.33%;
}
.fg--push-third {
margin-left: 33.33%;
}
.fg-quarter {
flex: 0 1 25%;
}
.fg--push-quarter {
margin-left: 25%;
}
.fg-fifth {
flex: 0 1 20%;
}
.fg--push-fifth {
margin-left: 20%;
}
.fg-sixth {
flex: 0 1 16%;
}
.fg--push-sixth {
margin-left: 16%;
}
.fg-seventh {
flex: 0 1 14.28%;
}
.fg--push-seventh {
margin-left: 14.28%;
}
.fg-eighth {
flex: 0 1 12.5%;
}
.fg--push-eighth {
margin-left: 12.5%;
}
.fg-ninth {
flex: 0 1 11.11%;
}
.fg--push-ninth {
margin-left: 11.11%;
}
.fg-tenth {
flex: 0 1 10%;
}
.fg--push-tenth {
margin-left: 10%;
}
.fg-eleventh {
flex: 0 1 9.09%;
}
.fg--push-eleventh {
margin-left: 9.09%;
}
.fg-twelfth {
flex: 0 1 8.33%;
}
.fg--push-twelfth {
margin-left: 8.33%;
}
html, body, .fg {
margin: 0;
padding: 0;
height: 100%;
}
.fg div:nth-child(1) {
background: #87bd71;
}
.fg div:nth-child(2) {
background: #54a6bd;
}
.fg div:nth-child(3) {
background: #8db89f;
}
.fg div:nth-child(4) {
background: #7e0d34;
}
.fg div:nth-child(5) {
background: #8c2636;
}
.fg div:nth-child(6) {
background: #3a4e3e;
}
.fg div:nth-child(7) {
background: #4db71f;
}
.fg div:nth-child(8) {
background: #687127;
}
.fg div:nth-child(9) {
background: #46755d;
}
.fg div:nth-child(10) {
background: #197b80;
}
.fg div:nth-child(11) {
background: #64a09b;
}
.fg div:nth-child(12) {
background: #192bb1;
}
.fg div:nth-child(13) {
background: #d320b3;
}
.fg div:nth-child(14) {
background: #179e32;
}
.fg div:nth-child(15) {
background: #704da2;
}
.fg div:nth-child(16) {
background: #232771;
}
.fg div:nth-child(17) {
background: #2ac41a;
}
.fg div:nth-child(18) {
background: #9b8ea9;
}
.fg div:nth-child(19) {
background: #14cd89;
}
.fg div:nth-child(20) {
background: #b455ab;
}
.fg div:nth-child(21) {
background: #c9bb92;
}
.fg div:nth-child(22) {
background: #bca62d;
}
.fg div:nth-child(23) {
background: #abb627;
}
.fg div:nth-child(24) {
background: #9645a1;
}
.fg div:nth-child(25) {
background: #816fde;
}
.fg div:nth-child(26) {
background: #dcaec1;
}
.fg div:nth-child(27) {
background: #3a9d24;
}
.fg div:nth-child(28) {
background: #53b5e2;
}
.fg div:nth-child(29) {
background: #e4a587;
}
.fg div:nth-child(30) {
background: #358198;
}
.fg div:nth-child(31) {
background: #46e14a;
}
.fg div:nth-child(32) {
background: #9fe125;
}
.fg div:nth-child(33) {
background: #dbab65;
}
.fg div:nth-child(34) {
background: #d5b2de;
}
.fg div:nth-child(35) {
background: #61ab8a;
}
.fg div:nth-child(36) {
background: #a44e31;
}
.fg div:nth-child(37) {
background: #5dedce;
}
.fg div:nth-child(38) {
background: #c9a098;
}
.fg div:nth-child(39) {
background: #5b5dae;
}
.fg div:nth-child(40) {
background: #d768d2;
}
.fg div:nth-child(41) {
background: #30b4d7;
}
.fg div:nth-child(42) {
background: #7855e6;
}
.fg div:nth-child(43) {
background: #d99537;
}
.fg div:nth-child(44) {
background: #324aee;
}
.fg div:nth-child(45) {
background: #a56ff0;
}
.fg div:nth-child(46) {
background: #7b4850;
}
.fg div:nth-child(47) {
background: #7044ad;
}
.fg div:nth-child(48) {
background: #cf5f79;
}
.fg div:nth-child(49) {
background: #3ddd53;
}
.fg div:nth-child(50) {
background: #e155e5;
}
Raw
SassMeister-rendered.html
<div class="fg">
<div class="fg-full">
Full
</div>
<div class="fg-half">
Half
</div>
<div class="fg-half">
Half
</div>
<div class="fg-third">
Third
</div>
<div class="fg-third">
Third
</div>
<div class="fg-third">
Third
</div>
<div class="fg-quarter">
Quarter
</div>
<div class="fg-quarter">
Quarter
</div>
<div class="fg-quarter">
Quarter
</div>
<div class="fg-quarter">
Quarter
</div>
<div class="fg-quarter fg--push-sixth">
Quater pushed a sixth
</div>
<div class="fg-quarter fg--push-sixth">
Quater pushed a sixth
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment