Skip to content

Instantly share code, notes, and snippets.

@alecperkins
Last active August 29, 2015 14:07
Show Gist options
  • Save alecperkins/b6b2990a3fdb93246bc2 to your computer and use it in GitHub Desktop.
Save alecperkins/b6b2990a3fdb93246bc2 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<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>
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
// An example of the Shiny method and mixins in action.
// http://shiny.tools
// 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.
.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;
}
}
.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;
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment