Skip to content

Instantly share code, notes, and snippets.

@AleksejDix

AleksejDix/SassMeister-input-HTML.html

Created February 24, 2016 08:46
Show Gist options
  • Save AleksejDix/45be2c972970796f94f6 to your computer and use it in GitHub Desktop.
Save AleksejDix/45be2c972970796f94f6 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="product-list">
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
img{
max-width: 100%;
}
.product-list{
max-width: 375px;
font-size: 0;
white-space: nowrap;
overflow: hidden;
padding-left: -30px;
&__item{
font-size: initial;
width: 150px;
margin-left: 30px;
display: inline-block;
border: 1px solid whitesmoke;
border-radius: 4px;
}
}
Raw
SassMeister-output.css
img {
max-width: 100%;
}
.product-list {
max-width: 375px;
font-size: 0;
white-space: nowrap;
overflow: hidden;
padding-left: -30px;
}
.product-list__item {
font-size: initial;
width: 150px;
margin-left: 30px;
display: inline-block;
border: 1px solid whitesmoke;
border-radius: 4px;
}
Raw
SassMeister-rendered.html
<div class="product-list">
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
<div class="product-list__item">
<a href="/">
<img src="https://cdn.siroop.ch/media/images/sized/GP2Tg0xBog-IlKewvYrQ2A.200x200.jpg" alt="radio" />
</a>
<div class="product__title">
<a href="/">
Super Radio
</a>
<div class="product__price price">
<span class="price__currensy">
CHF
</span> 1983.00
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment