Skip to content

Instantly share code, notes, and snippets.

@kevinthompson

kevinthompson/SassMeister-input-HTML.html

Created December 9, 2013 18:34
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 kevinthompson/7877972 to your computer and use it in GitHub Desktop.
Save kevinthompson/7877972 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div id="people-show">
<div class="person">
<h1>This is a Person</h1>
</div>
</div>
<div id="plans-show">
<div class="plan">
<h1>This is a Plan</h1>
</div>
</div>
Raw
SassMeister-input.sass
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
// ./app/assets/stylesheets/components/block.sass
%block
background: #f1f1f1
padding: 10px
margin: 10px
&.rounded
border-radius: 3px
&.bordered
border: 1px solid rgba(0,100,100,.2)
// ./app/assets/stylesheets/components/card.sass
%card
@extend %block
@extend %block.bordered
@extend %block.rounded
// ./app/assets/stylesheets/views/people/show.sass
#people-show
.person
@extend %block
@extend %block.rounded
// ./app/assets/stylesheets/views/plans/show.sass
#plans-show
.plan
@extend %card
Raw
SassMeister-output.css
#plans-show .plan, #people-show .person {
background: #f1f1f1;
padding: 10px;
margin: 10px;
}
#plans-show .plan, #people-show .person {
border-radius: 3px;
}
#plans-show .plan, #people-show .bordered.person {
border: 1px solid rgba(0, 100, 100, 0.2);
}
Raw
SassMeister-rendered.html
<div id="people-show">
<div class="person">
<h1>This is a Person</h1>
</div>
</div>
<div id="plans-show">
<div class="plan">
<h1>This is a Plan</h1>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment