Skip to content

Instantly share code, notes, and snippets.

@sgregson

sgregson/SassMeister-input-HTML.html

Last active October 9, 2015 16:48
Show Gist options
  • Save sgregson/544d7a38aedd8be376b5 to your computer and use it in GitHub Desktop.
Save sgregson/544d7a38aedd8be376b5 to your computer and use it in GitHub Desktop.
Download ZIP
SASS Naming and Nesting approaches
Raw
SassMeister-input-HTML.html
<!-- The .is-expanded is a response to data/user changes -->
<div class="MediaElement MediaElement--featured is-expanded">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/150x150" />
<div>some info</div>
</div>
<div class="MediaElement-content">
and wow, i'm both featured and expanded!
</div>
</div>
<div class="MediaElement MediaElement--featured is-expanded">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/150x150" />
<div>some info</div>
</div>
<div class="MediaElement-content">
and wow, i'm both featured and expanded!
</div>
</div>
<div class="MediaElement MediaElement--featured is-expanded">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/150x150" />
<div>some info</div>
</div>
<div class="MediaElement-content">
and wow, i'm both featured and expanded!
</div>
</div>
<div class="MediaElement">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/80x80" />
<div>look! text info</div>
</div>
<div class="MediaElement-content">
But I'm real text. full of content and lorem
</div>
</div>
<div class="MediaElement">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/80x80" />
<div>look! text info</div>
</div>
<div class="MediaElement-content">
But I'm real text. full of content and lorem
</div>
</div>
<div class="MediaElement">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/80x80" />
<div>look! text info</div>
</div>
<div class="MediaElement-content">
But I'm real text. full of content and lorem
</div>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
/*******************************************************************
# SASS 3.3+ SUIT with Import + Extend pattern
*/
body {
background: #d9d9d9;
}
%u-cf {
&:before,
&:after {
content: " ";
display: table;
}
&:after {clear: both;}
}
@mixin MediaElement(
$bgColor: #fff,
$content-bgColor: #000,
$meta-style: italic,
$featured-boxShadow: null
) {
.MediaElement {
float: left;
background-color: $bgColor;
color: #4d4d4f;
padding: 10px;
border: 1px solid #000;
margin: 0 5px 10px;
&-content,
&-meta {
padding: 5px;
}
&-img,
&-meta {
float: left;
}
&-content {
min-width: 280px;
background: $content-bgColor;
@extend %u-cf;
}
&-meta {
font-style: $meta-style;
}
// Top-level variation
&--featured {
box-shadow: $featured-boxShadow;
.MediaElement-img {
border: 3px solid rgba(#4d4d4f, .75);
border-width: 0 3px 3px 0;
border-radius: 50%;
}
}
// States
&.is-expanded {
.MediaElement-content {
min-height: 400px;
}
}
}
}
/* located in brand#1 file*/
@include MediaElement( $content-bgColor: green );
/* located in Brand#2 file, comment */
@include MediaElement( $content-bgColor: #f00,
$featured-boxShadow: 4px 8px 2px rgba(0, 0, 0, 0.3)
);
Raw
SassMeister-output.css
/*******************************************************************
# SASS 3.3+ SUIT with Import + Extend pattern
*/
body {
background: #d9d9d9;
}
.MediaElement-content:before,
.MediaElement-content:after {
content: " ";
display: table;
}
.MediaElement-content:after {
clear: both;
}
/* located in brand#1 file*/
.MediaElement {
float: left;
background-color: #fff;
color: #4d4d4f;
padding: 10px;
border: 1px solid #000;
margin: 0 5px 10px;
}
.MediaElement-content,
.MediaElement-meta {
padding: 5px;
}
.MediaElement-img,
.MediaElement-meta {
float: left;
}
.MediaElement-content {
min-width: 280px;
background: green;
}
.MediaElement-meta {
font-style: italic;
}
.MediaElement--featured .MediaElement-img {
border: 3px solid rgba(77, 77, 79, 0.75);
border-width: 0 3px 3px 0;
border-radius: 50%;
}
.MediaElement.is-expanded .MediaElement-content {
min-height: 400px;
}
/* located in Brand#2 file, comment */
.MediaElement {
float: left;
background-color: #fff;
color: #4d4d4f;
padding: 10px;
border: 1px solid #000;
margin: 0 5px 10px;
}
.MediaElement-content,
.MediaElement-meta {
padding: 5px;
}
.MediaElement-img,
.MediaElement-meta {
float: left;
}
.MediaElement-content {
min-width: 280px;
background: #f00;
}
.MediaElement-meta {
font-style: italic;
}
.MediaElement--featured {
box-shadow: 4px 8px 2px rgba(0, 0, 0, 0.3);
}
.MediaElement--featured .MediaElement-img {
border: 3px solid rgba(77, 77, 79, 0.75);
border-width: 0 3px 3px 0;
border-radius: 50%;
}
.MediaElement.is-expanded .MediaElement-content {
min-height: 400px;
}
Raw
SassMeister-rendered.html
<!-- The .is-expanded is a response to data/user changes -->
<div class="MediaElement MediaElement--featured is-expanded">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/150x150" />
<div>some info</div>
</div>
<div class="MediaElement-content">
and wow, i'm both featured and expanded!
</div>
</div>
<div class="MediaElement MediaElement--featured is-expanded">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/150x150" />
<div>some info</div>
</div>
<div class="MediaElement-content">
and wow, i'm both featured and expanded!
</div>
</div>
<div class="MediaElement MediaElement--featured is-expanded">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/150x150" />
<div>some info</div>
</div>
<div class="MediaElement-content">
and wow, i'm both featured and expanded!
</div>
</div>
<div class="MediaElement">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/80x80" />
<div>look! text info</div>
</div>
<div class="MediaElement-content">
But I'm real text. full of content and lorem
</div>
</div>
<div class="MediaElement">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/80x80" />
<div>look! text info</div>
</div>
<div class="MediaElement-content">
But I'm real text. full of content and lorem
</div>
</div>
<div class="MediaElement">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/80x80" />
<div>look! text info</div>
</div>
<div class="MediaElement-content">
But I'm real text. full of content and lorem
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment