Skip to content

Instantly share code, notes, and snippets.

@philkeys

philkeys/SassMeister-input-HTML.html

Created October 16, 2014 04:59
Show Gist options
  • Save philkeys/9fd2590302adc46d4d6b to your computer and use it in GitHub Desktop.
Save philkeys/9fd2590302adc46d4d6b to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="thing"></div>
<h2>Standard</h2>
<div class="icr-main-info-glyphs">
<div class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</div>
</div>
<h2>Standard - flipped</h2>
<div class="icr-main-info-glyphs-1">
<div class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</div>
</div>
<h2>Stacked</h2>
<div class="icr-main-info-glyphs-2">
<div class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</div>
</div>
<h2>Compress</h2>
<div class="icr-main-info-glyphs-3">
<div class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</div>
</div>
<h2>Decompress</h2>
<div class="icr-main-info-glyphs-4">
<div class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</div>
</div>
<figure class="icr-main-info-displays">
<div class="media-graphic">
<img src="http://media.spiralknights.com/wiki-images/3/37/Monster-Gun_Puppy.png">
</div>
<figcaption class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</figcaption>
</figure>
Raw
SassMeister-input.sass
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
@mixin print($declarations)
@each $property, $value in $declarations
#{$property}: $value
*
margin: 0
padding: 0
img, i
vertical-align: top
$mobile-breakpoint: 1300px
// generated icon variables
$svg-ico-robot: (width: 128px, height: 128px, background: url(http://media.spiralknights.com/wiki-images/3/37/Monster-Gun_Puppy.png))
%svg-ico-robot
+print($svg-ico-robot)
%pseudo-icon
content: ''
background-repeat: no-repeat
background-position: center
// this is our base media class
=media-element-props
display: table
.media-graphic
vertical-align: middle
.media-content, .media-graphic
display: table-cell
=media--stacked-props
text-align: center
// have to define a different-named media element placeholder within each directive
%media-element
+media-element-props
%media--stacked
+media--stacked-props
@media screen and (max-width: $mobile-breakpoint)
%media-element--mobile
+media-element-props
%media--stacked--mobile
+media--stacked-props
@media screen and (min-width: $mobile-breakpoint + 1)
%media-element--except-mobile
+media-element-props
%media--stacked--except-mobile
+media--stacked-props
=media--stacked($icon, $arrangement)
@if $icon
&::#{$arrangement}
display: inline-block
=media--standard($content-alignment, $icon, $arrangement)
.media-content
vertical-align: $content-alignment
@if $icon
&::#{$arrangement}
display: table-cell
=media($content-alignment, $mode: standard, $icon: false, $arrangement: before)
@if $mode == stacked or $mode == decompress
@extend %media--stacked
+media--stacked($icon, $arrangement)
@if $mode == standard
@extend %media-element
+media--standard($content-alignment, $icon, $arrangement)
@if $mode == decompress
@media screen and (max-width: $mobile-breakpoint)
@extend %media-element--mobile
+media--standard($content-alignment, $icon, $arrangement)
@if $mode == compress
@media screen and (max-width: $mobile-breakpoint)
@extend %media--stacked--mobile
+media--stacked($icon, $arrangement)
@media screen and (min-width: $mobile-breakpoint + 1)
@extend %media-element--except-mobile
+media--standard($content-alignment, $icon, $arrangement)
@if $icon
&::#{$arrangement}
@extend %#{$icon}
@extend %pseudo-icon
//=media-icon($icon)
// &::before
// @extend %#{$icon}
// here is our implementation class
.icr-main-info-glyphs
+media(middle, standard, svg-ico-robot)
.icr-main-info-glyphs-1
+media(middle, standard, svg-ico-robot, after)
.icr-main-info-glyphs-2
+media(middle, stacked, svg-ico-robot)
.icr-main-info-glyphs-3
+media(middle, compress, svg-ico-robot)
.icr-main-info-glyphs-4
+media(middle, decompress, svg-ico-robot)
.icr-main-info-displays
+media(middle, standard)
h2 + div, figure
border: 1px solid gray
Raw
SassMeister-output.css
* {
margin: 0;
padding: 0;
}
img, i {
vertical-align: top;
}
.icr-main-info-glyphs::before, .icr-main-info-glyphs-1::after, .icr-main-info-glyphs-2::before, .icr-main-info-glyphs-3::before, .icr-main-info-glyphs-4::before {
width: 128px;
height: 128px;
background: url(http://media.spiralknights.com/wiki-images/3/37/Monster-Gun_Puppy.png);
}
.icr-main-info-glyphs::before, .icr-main-info-glyphs-1::after, .icr-main-info-glyphs-2::before, .icr-main-info-glyphs-3::before, .icr-main-info-glyphs-4::before {
content: "";
background-repeat: no-repeat;
background-position: center;
}
.icr-main-info-glyphs, .icr-main-info-glyphs-1, .icr-main-info-displays {
display: table;
}
.icr-main-info-glyphs .media-graphic, .icr-main-info-glyphs-1 .media-graphic, .icr-main-info-displays .media-graphic {
vertical-align: middle;
}
.icr-main-info-glyphs .media-content, .icr-main-info-glyphs-1 .media-content, .icr-main-info-displays .media-content, .icr-main-info-glyphs .media-graphic, .icr-main-info-glyphs-1 .media-graphic, .icr-main-info-displays .media-graphic {
display: table-cell;
}
.icr-main-info-glyphs-2, .icr-main-info-glyphs-4 {
text-align: center;
}
@media screen and (max-width: 1300px) {
.icr-main-info-glyphs-4 {
display: table;
}
.icr-main-info-glyphs-4 .media-graphic {
vertical-align: middle;
}
.icr-main-info-glyphs-4 .media-content, .icr-main-info-glyphs-4 .media-graphic {
display: table-cell;
}
.icr-main-info-glyphs-3 {
text-align: center;
}
}
@media screen and (min-width: 1301px) {
.icr-main-info-glyphs-3 {
display: table;
}
.icr-main-info-glyphs-3 .media-graphic {
vertical-align: middle;
}
.icr-main-info-glyphs-3 .media-content, .icr-main-info-glyphs-3 .media-graphic {
display: table-cell;
}
}
.icr-main-info-glyphs .media-content {
vertical-align: middle;
}
.icr-main-info-glyphs::before {
display: table-cell;
}
.icr-main-info-glyphs-1 .media-content {
vertical-align: middle;
}
.icr-main-info-glyphs-1::after {
display: table-cell;
}
.icr-main-info-glyphs-2::before {
display: inline-block;
}
@media screen and (max-width: 1300px) {
.icr-main-info-glyphs-3::before {
display: inline-block;
}
}
@media screen and (min-width: 1301px) {
.icr-main-info-glyphs-3 .media-content {
vertical-align: middle;
}
.icr-main-info-glyphs-3::before {
display: table-cell;
}
}
.icr-main-info-glyphs-4::before {
display: inline-block;
}
@media screen and (max-width: 1300px) {
.icr-main-info-glyphs-4 .media-content {
vertical-align: middle;
}
.icr-main-info-glyphs-4::before {
display: table-cell;
}
}
.icr-main-info-displays .media-content {
vertical-align: middle;
}
h2 + div, figure {
border: 1px solid gray;
}
Raw
SassMeister-rendered.html
<div class="thing"></div>
<h2>Standard</h2>
<div class="icr-main-info-glyphs">
<div class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</div>
</div>
<h2>Standard - flipped</h2>
<div class="icr-main-info-glyphs-1">
<div class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</div>
</div>
<h2>Stacked</h2>
<div class="icr-main-info-glyphs-2">
<div class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</div>
</div>
<h2>Compress</h2>
<div class="icr-main-info-glyphs-3">
<div class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</div>
</div>
<h2>Decompress</h2>
<div class="icr-main-info-glyphs-4">
<div class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</div>
</div>
<figure class="icr-main-info-displays">
<div class="media-graphic">
<img src="http://media.spiralknights.com/wiki-images/3/37/Monster-Gun_Puppy.png">
</div>
<figcaption class="media-content">
<h3>Media Content Header</h3>
<p>Media Content Body</p>
</figcaption>
</figure>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment