Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
/ person listing page
%div#person-list
%div.person
default
%div.person.person--active
active
%div.person.person--pending
pending
/ person show page
%div#person-show
%div.person
%div.first-name Anonymous
%div.last-name Person
%div.person.person--admin
%div.first-name Michael
%div.last-name Chan
/ test @at-root
%div#block-wrapper
%div.block
test block
%div.block__element
test element
%div.block.block--modifier
test modifier
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
// person.sass
%person
background: #ddd
&.person--admin
padding: 20px
color: white
background: red
.first-name
font-weight: bold
.last-name
font-style: italic
%person-list-item
display: block
width: 200px
height: 30px
background: grey
text-align: center
color: white
line-height: 30px
&.person--active
background: blue
.person--name
color: white
text-align: center
// person.show.sass
#person-list
.person
@extend %person-list-item
&.person--pending
background: yellow
color: grey
#person-show
.person
@extend %person
.first-name
color: pink
font-weight: normal
#block-wrapper
.block
color: blue
.block__element
color: red
&.block--modifier
color: orange
#person-show .person {
background: #dddddd;
}
#person-show .person--admin.person {
padding: 20px;
color: white;
background: red;
}
#person-show .person .first-name {
font-weight: bold;
}
#person-show .person .last-name {
font-style: italic;
}
#person-list .person {
display: block;
width: 200px;
height: 30px;
background: grey;
text-align: center;
color: white;
line-height: 30px;
}
#person-list .person--active.person {
background: blue;
}
#person-list .person .person--name {
color: white;
text-align: center;
}
#person-list .person.person--pending {
background: yellow;
color: grey;
}
#person-show .person .first-name {
color: pink;
font-weight: normal;
}
#block-wrapper .block {
color: blue;
}
#block-wrapper .block .block__element {
color: red;
}
#block-wrapper .block.block--modifier {
color: orange;
}
<!-- person listing page -->
<div id='person-list'>
<div class='person'>
default
</div>
<div class='person person--active'>
active
</div>
<div class='person person--pending'>
pending
</div>
</div>
<!-- person show page -->
<div id='person-show'>
<div class='person'>
<div class='first-name'>Anonymous</div>
<div class='last-name'>Person</div>
</div>
<div class='person person--admin'>
<div class='first-name'>Michael</div>
<div class='last-name'>Chan</div>
</div>
</div>
<!-- test @at-root -->
<div id='block-wrapper'>
<div class='block'>
test block
<div class='block__element'>
test element
</div>
</div>
<div class='block block--modifier'>
test modifier
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment