Skip to content

Instantly share code, notes, and snippets.

@alecperkins

alecperkins/SassMeister-input-HTML.html

Created October 10, 2014 20:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alecperkins/d288dea460cec553327d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alecperkins/d288dea460cec553327d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Alec Perkins created this gist Oct 10, 2014.
    44 changes: 44 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    <div class="Site__">
    <div class="_Products__">
    <div class="ProductShowcase">
    <img class="_Image" src="http://placepuppy.it/300/200">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="ProductShowcase">
    <img class="_Image" src="http://placepuppy.it/300/200">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="ProductShowcase">
    <img class="_Image" src="http://placepuppy.it/300/200">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
    </div>
    <div class="_Team__">
    <div class="TeamMemberProfile -featured">
    <img class="_Image" src="http://placepuppy.it/400/400">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
    <img class="_Image" src="http://placepuppy.it/400/400">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
    <img class="_Image" src="http://placepuppy.it/400/400">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
    <img class="_Image" src="http://placepuppy.it/400/400">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
    <img class="_Image" src="http://placepuppy.it/400/400">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
    </div>
    </div>
    95 changes: 95 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    // ----
    // Sass (v3.4.4)
    // Compass (v1.0.1)
    // ----

    // The helper mixins:
    @mixin extend-variants($component_name, $variants...) {
    @each $variant in $variants {
    @if type_of($variant) == "list" {
    $variant: #{nth($variant, 1)}--#{nth($variant, 2)};
    }
    @extend %#{$component_name}%-#{$variant};
    }
    }
    @mixin extend($component_name, $variants...) {
    @extend %#{$component_name};
    @include extend-variants($component_name, $variants...);
    }
    @mixin state($state, $val: true) {
    &[data-#{$state}="#{$val}"] {
    @content;
    }
    }

    // A sample abstract Component definition using placeholder selectors.
    // Only the rules that are extended will be present in the CSS output.
    // Note the use of the regular class `._Image` for a subcomponent.
    // This is done to avoid nested placholder selectors, which, when
    // extended, can generate a mass of redundant selectors.
    $Highlight-spacing: 14px;
    %Highlight {
    clear: both;
    color: black;
    font-size: 16px;
    padding: $Highlight-spacing;
    &::after {
    clear: both;
    content: '';
    display: block;
    }
    &%-image--right {
    ._Image {
    float: right;
    margin-left: $Highlight-spacing;
    }
    }
    &%-image--left {
    ._Image {
    float: left;
    margin-right: $Highlight-spacing;
    }
    }
    &%-large {
    font-size: 24px;
    ._Image {
    width: 50%;
    }
    }
    &%-dark {
    background: black;
    color: white;
    }
    ._Image {
    margin-bottom: $Highlight-spacing;
    width: 25%;
    }
    }

    // The mixins simplify extending the different combinations and
    // take advantage of how `@extend` rewrites placeholder selectors
    // to hide presentation-oriented classes behind semantic names.
    // (By design, the mixins only extend placeholder selectors.)
    .ProductShowcase {
    @include extend(Highlight, dark, image right);
    }
    .TeamMemberProfile {
    @include extend(Highlight, image left);
    &.-featured {
    @include extend-variants(Highlight, large);
    }
    }

    // Basic Layout with two Regions.
    .Site__ {
    ._Products__,
    ._Team__ {
    margin: 0 auto;
    }
    ._Products__ {
    max-width: 600px;
    }
    ._Team__ {
    max-width: 800px;
    }
    }
    44 changes: 44 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    .ProductShowcase, .TeamMemberProfile {
    clear: both;
    color: black;
    font-size: 16px;
    padding: 14px;
    }
    .ProductShowcase::after, .TeamMemberProfile::after {
    clear: both;
    content: '';
    display: block;
    }
    .ProductShowcase ._Image {
    float: right;
    margin-left: 14px;
    }
    .TeamMemberProfile ._Image {
    float: left;
    margin-right: 14px;
    }
    .TeamMemberProfile.-featured {
    font-size: 24px;
    }
    .TeamMemberProfile.-featured ._Image {
    width: 50%;
    }
    .ProductShowcase {
    background: black;
    color: white;
    }
    .ProductShowcase ._Image, .TeamMemberProfile ._Image {
    margin-bottom: 14px;
    width: 25%;
    }

    .Site__ ._Products__,
    .Site__ ._Team__ {
    margin: 0 auto;
    }
    .Site__ ._Products__ {
    max-width: 600px;
    }
    .Site__ ._Team__ {
    max-width: 800px;
    }
    44 changes: 44 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    <div class="Site__">
    <div class="_Products__">
    <div class="ProductShowcase">
    <img class="_Image" src="http://placepuppy.it/300/200">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="ProductShowcase">
    <img class="_Image" src="http://placepuppy.it/300/200">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="ProductShowcase">
    <img class="_Image" src="http://placepuppy.it/300/200">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
    </div>
    <div class="_Team__">
    <div class="TeamMemberProfile -featured">
    <img class="_Image" src="http://placepuppy.it/400/400">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
    <img class="_Image" src="http://placepuppy.it/400/400">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
    <img class="_Image" src="http://placepuppy.it/400/400">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
    <img class="_Image" src="http://placepuppy.it/400/400">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
    <img class="_Image" src="http://placepuppy.it/400/400">
    <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
    </div>
    </div>