Skip to content

Instantly share code, notes, and snippets.

@starryeyez024

starryeyez024/SassMeister-input-HTML.haml

Created February 3, 2015 16:58
Show Gist options
  • Save starryeyez024/74e1caf3c1547f9a524c to your computer and use it in GitHub Desktop.
Save starryeyez024/74e1caf3c1547f9a524c to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.haml
.view-foobar
.views-row.views-row-1
.inner
.image-wrap
%img(src="http://placekitten.com/2100/300")
%p I love responsive design
.views-row.views-row-2
.inner
.image-wrap
%img(src="http://placekitten.com/450/350")
%p Try scaling the window...
.views-row.views-row-3
.inner
.image-wrap
%img(src="http://placekitten.com/1200/900")
%p Sassmeister is responsive too!
.views-row.views-row-4
.inner
.image-wrap
%img(src="http://placekitten.com/450/300")
%p Kittens <3 RWD.
.views-row.views-row-5
.inner
.image-wrap
%img(src="http://placekitten.com/850/600")
%p Wow this is sweet!
.views-row.views-row-6
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-7
.inner
.image-wrap
%img(src="http://placekitten.com/1200/900")
%p Wow this is cool!
.views-row.views-row-8
.inner
.image-wrap
%img(src="http://placekitten.com/800/650")
%p Wow this is sweet!
.views-row.views-row-9
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-10
.inner
.image-wrap
%img(src="http://placekitten.com/1200/900")
%p Wow this is cool!
.views-row.views-row-11
.inner
.image-wrap
%img(src="http://placekitten.com/800/600")
%p Wow this is sweet!
.views-row.views-row-12
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-13
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-14
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-12
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Toolkit (v2.6.0)
// ----
@import "compass";
@import "toolkit";
@import "breakpoint";
// Styles for niceness
body {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
background: #dddddd;
color: #222222;
p {
margin: 3px 0;
}
img {
max-width: 100%;
}
}
*, *:before, *:after {
box-sizing: border-box;
}
$sg-cols: 3;
$sg-spacing: 20px;
$sg-offset: null;
$sg-margin-direction: right;
$sg-rows: 4;
@mixin symmetric-grid(
$cols: $sg-cols,
$space: $sg-spacing,
$offset: $sg-offset,
$margin-direction: $sg-margin-direction,
$rows: $sg-rows
){
margin-#{$margin-direction}: $space;
clear: none;
max-width: 100%;
$minus-margins: ceil($space * ($cols - 1) / $cols) + 1px;
@if $margin-direction == "right" {
float: left;
}
@if $margin-direction == "left" {
float: right;
}
@if $offset {
&:nth-child(#{$offset}) {
width: 100%;
}
&:nth-child(n+#{$offset + 1}) {
width: calc((100% / #{$cols}) - #{$minus-margins});
}
@for $i from 1 through $rows {
// Using extends to reduce CSS lines
&%off-margin-side {
margin-#{$margin-direction}: 0;
}
&%off-clear-left {
clear: left;
}
&%off-margin-top {
margin-top: $sg-spacing;
}
///////////////////
&:nth-child(#{$cols * $i + $offset}) {
@extend %off-margin-side;
}
&:nth-child(#{$cols * $i + 1 + $offset}) {
@extend %off-clear-left
}
&:nth-child(n + #{$i + $offset}) {
@extend %off-margin-top;
}
}
}
@else if $offset == "null" {
width: calc((100% / #{$cols}) - #{$minus-margins});
@for $i from 1 through $rows {
// Using extends to reduce CSS lines
&%margin-side {
margin-#{$margin-direction}: 0;
}
&%clear-left {
clear: left;
}
&%margin-top {
@extend %margin-side;
}
/////////////
&:nth-child(#{$cols * $i}) {
margin-#{$margin-direction}: 0;
}
&:nth-child(#{$cols * $i + 1}) {
@extend %clear-left;
}
&:nth-child(n + #{$i * $rows + 1}) {
@extend %margin-top;
}
}
}
}
.view-foobar {
max-width: 90%;
margin: 0 auto;
background: #f1f1f1;
}
.view-foobar .views-row {
@include breakpoint(500px 700px){
@include symmetric-grid(2, 10px);
}
@include breakpoint(700px 1100px){
@include symmetric-grid(3, 10px, 1);
}
@include breakpoint(1100px){
@include symmetric-grid(4, 30px, 1);
}
}
Raw
SassMeister-output.css
You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend %off-margin-side" on line 67.
Raw
SassMeister-rendered.html
<div class='view-foobar'>
<div class='views-row views-row-1'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2100/300'>
</div>
<p>I love responsive design</p>
</div>
</div>
<div class='views-row views-row-2'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/450/350'>
</div>
<p>Try scaling the window...</p>
</div>
</div>
<div class='views-row views-row-3'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Sassmeister is responsive too!</p>
</div>
</div>
<div class='views-row views-row-4'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/450/300'>
</div>
<p>Kittens <3 RWD.</p>
</div>
</div>
<div class='views-row views-row-5'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/850/600'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-6'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-7'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Wow this is cool!</p>
</div>
</div>
<div class='views-row views-row-8'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/650'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-9'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-10'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Wow this is cool!</p>
</div>
</div>
<div class='views-row views-row-11'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/600'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-12'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-13'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-14'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-12'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment