Skip to content

Instantly share code, notes, and snippets.

@adamj88

adamj88/SassMeister-input-HTML.html

Created November 10, 2015 11:47
Show Gist options
  • Save adamj88/9baef10cca87eca5dcb2 to your computer and use it in GitHub Desktop.
Save adamj88/9baef10cca87eca5dcb2 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="home-cta ">
<ul>
<li id="ibanner-2">
<div class="banner">
<a href="http://dev.publicdesire.co.uk/heels.html" title="Heel Me">
<img src="http://dev.publicdesire.co.uk/media/ibanners/ANKLE_BOOTS.jpg" alt="Heel Me">
</a>
</div>
</li>
<li id="ibanner-3">
<div class="banner">
<a href="http://dev.publicdesire.co.uk/long-boots.html" title="Student">
<img src="http://dev.publicdesire.co.uk/media/ibanners/WAYS_TO_WEAR_4.gif" alt="Student">
</a>
</div>
</li>
<li id="ibanner-4">
<div class="banner">
<a href="http://dev.publicdesire.co.uk/sale.html" title="Instagram">
<img src="http://dev.publicdesire.co.uk/media/ibanners/STUDENT_2.jpg" alt="Instagram">
</a>
</div>
</li>
<li id="ibanner-5">
<div class="banner">
<a href="http://dev.publicdesire.co.uk/campaign/disco-inferno" title="Bae Watch">
<img src="http://dev.publicdesire.co.uk/media/ibanners/TREND_FLUFFY_1.jpg" alt="Bae Watch">
</a>
</div>
</li>
</ul>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
.home-cta {
margin-bottom: 20px;
ul {
display: block;
overflow: hidden;
width: 100%;
}
li {
clear: left;
display: block;
float: left;
width: 50%;
&:nth-child(even) {
float: right;
clear: right;
}
}
img {
display: block;
width: 100%;
}
}
Raw
SassMeister-output.css
.home-cta {
margin-bottom: 20px;
}
.home-cta ul {
display: block;
overflow: hidden;
width: 100%;
}
.home-cta li {
clear: left;
display: block;
float: left;
width: 50%;
}
.home-cta li:nth-child(even) {
float: right;
clear: right;
}
.home-cta img {
display: block;
width: 100%;
}
Raw
SassMeister-rendered.html
<div class="home-cta ">
<ul>
<li id="ibanner-2">
<div class="banner">
<a href="http://dev.publicdesire.co.uk/heels.html" title="Heel Me">
<img src="http://dev.publicdesire.co.uk/media/ibanners/ANKLE_BOOTS.jpg" alt="Heel Me">
</a>
</div>
</li>
<li id="ibanner-3">
<div class="banner">
<a href="http://dev.publicdesire.co.uk/long-boots.html" title="Student">
<img src="http://dev.publicdesire.co.uk/media/ibanners/WAYS_TO_WEAR_4.gif" alt="Student">
</a>
</div>
</li>
<li id="ibanner-4">
<div class="banner">
<a href="http://dev.publicdesire.co.uk/sale.html" title="Instagram">
<img src="http://dev.publicdesire.co.uk/media/ibanners/STUDENT_2.jpg" alt="Instagram">
</a>
</div>
</li>
<li id="ibanner-5">
<div class="banner">
<a href="http://dev.publicdesire.co.uk/campaign/disco-inferno" title="Bae Watch">
<img src="http://dev.publicdesire.co.uk/media/ibanners/TREND_FLUFFY_1.jpg" alt="Bae Watch">
</a>
</div>
</li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment