Skip to content

Instantly share code, notes, and snippets.

@scottdavis

scottdavis/SassMeister-input-HTML.html

Last active August 29, 2015 14:26
Show Gist options
  • Save scottdavis/5b7401c801986a8112be to your computer and use it in GitHub Desktop.
Save scottdavis/5b7401c801986a8112be to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class='container'>
<div class='agent'>
<div class='profile content'>
<img src='http://www.placecage.com/200/300' />
</div>
<div class='logo content'>
<img src='http://www.placecage.com/200/125' />
</div>
<div class='name content'>
<p>Nick Cage</p>
</div>
</div>
<div class='agent'>
<div class='profile content'>
<img src='http://www.placecage.com/200/300' />
</div>
<div class='logo content'>
<img src='http://www.placecage.com/200/125' />
</div>
<div class='name content'>
<p>Nick Cage</p>
</div>
</div>
<div class='agent'>
<div class='profile content'>
<img src='http://www.placecage.com/200/300' />
</div>
<div class='logo content'>
<img src='http://www.placecage.com/200/125' />
</div>
<div class='name content'>
<p>Nick Cage</p>
</div>
</div>
<div class='agent'>
<div class='profile content'>
<img src='http://www.placecage.com/200/300' />
</div>
<div class='logo content'>
<img src='http://www.placecage.com/200/125' />
</div>
<div class='name content'>
<p>Nick Cage</p>
</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@import "susy";
.container {
@include layout(12);
}
.agent {
@include span(6 of 12 last);
background-color: red;
border: 1px solid black;
position: relative;
.name {
padding-left : 100px;
}
&:nth-child(2n+0) {
background-color: blue;
}
&:nth-child(2n+1) {
direction:rtl;
.name {
padding-right : 100px;
}
}
}
Raw
SassMeister-output.css
.agent {
width: 49.15254%;
float: right;
margin-right: 0;
background-color: red;
border: 1px solid black;
position: relative;
}
.agent .name {
padding-left: 100px;
}
.agent:nth-child(2n+0) {
background-color: blue;
}
.agent:nth-child(2n+1) {
direction: rtl;
}
.agent:nth-child(2n+1) .name {
padding-right: 100px;
}
Raw
SassMeister-rendered.html
<div class='container'>
<div class='agent'>
<div class='profile content'>
<img src='http://www.placecage.com/200/300' />
</div>
<div class='logo content'>
<img src='http://www.placecage.com/200/125' />
</div>
<div class='name content'>
<p>Nick Cage</p>
</div>
</div>
<div class='agent'>
<div class='profile content'>
<img src='http://www.placecage.com/200/300' />
</div>
<div class='logo content'>
<img src='http://www.placecage.com/200/125' />
</div>
<div class='name content'>
<p>Nick Cage</p>
</div>
</div>
<div class='agent'>
<div class='profile content'>
<img src='http://www.placecage.com/200/300' />
</div>
<div class='logo content'>
<img src='http://www.placecage.com/200/125' />
</div>
<div class='name content'>
<p>Nick Cage</p>
</div>
</div>
<div class='agent'>
<div class='profile content'>
<img src='http://www.placecage.com/200/300' />
</div>
<div class='logo content'>
<img src='http://www.placecage.com/200/125' />
</div>
<div class='name content'>
<p>Nick Cage</p>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment