Skip to content

Instantly share code, notes, and snippets.

@alecperkins

alecperkins/SassMeister-input-HTML.html

Created March 22, 2014 15:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alecperkins/9709168 to your computer and use it in GitHub Desktop.
Save alecperkins/9709168 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="Stream">
<div class="Stream_Header"></div>
<div class="Stream_Entries">
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="IssueEntry"></div>
</div>
</div>
<div class="STREAM">
<div class="STREAM_Header"></div>
<div class="STREAM_Entries">
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="IssueEntry"></div>
</div>
</div>
<div class="stream">
<div class="_header"></div>
<div class="_entries">
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="IssueEntry"></div>
</div>
</div>
Raw
SassMeister-input.sass
// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// ----
=extend-variants($module_name, $variants...)
@each $variant in $variants
@if type_of($variant) == "list"
$variant: #{nth($variant, 1)}--#{nth($variant, 2)}
@extend %#{$module_name}-#{$variant}
=extend($module_name, $variants...)
@extend %#{$module_name}
+extend-variants($module_name, $variants...)
%StreamEntry, %stream_entry
width: 100%
min-height: 100px
border: 1px solid #ccc
margin: 1em
padding: 1em
.CollectionEntry
+extend(StreamEntry)
.IssueEntry
+extend(StreamEntry)
Raw
SassMeister-output.css
.CollectionEntry, .IssueEntry {
width: 100%;
min-height: 100px;
border: 1px solid #cccccc;
margin: 1em;
padding: 1em;
}
Raw
SassMeister-rendered.html
<div class="Stream">
<div class="Stream_Header"></div>
<div class="Stream_Entries">
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="IssueEntry"></div>
</div>
</div>
<div class="STREAM">
<div class="STREAM_Header"></div>
<div class="STREAM_Entries">
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="IssueEntry"></div>
</div>
</div>
<div class="stream">
<div class="_header"></div>
<div class="_entries">
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="CollectionEntry">
<div class="StoryItem -featured"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
<div class="StoryItem"></div>
</div>
<div class="IssueEntry"></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment