Skip to content

Instantly share code, notes, and snippets.

@cimmanon

cimmanon/SassMeister-input-HTML.html

Created July 20, 2015 10:55
Show Gist options
  • Save cimmanon/daf0e3730647439df2a6 to your computer and use it in GitHub Desktop.
Save cimmanon/daf0e3730647439df2a6 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="outer">
<div class="inner">foo</div>
<div class="inner">bar</div>
<div class="inner">bar</div>
<div class="inner">bar</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
.foo {
@for $i from 1 through 6 {
&.front:nth-child(#{$i}), &.back:nth-child(#{$i}) {
$brick-bg: '../image/brick' + random(6) + '.jpg';
background-image: url($brick-bg);
background-size: 100% 100%;
}
}
}
Raw
SassMeister-output.css
.foo.front:nth-child(1), .foo.back:nth-child(1) {
background-image: url("../image/brick1.jpg");
background-size: 100% 100%;
}
.foo.front:nth-child(2), .foo.back:nth-child(2) {
background-image: url("../image/brick4.jpg");
background-size: 100% 100%;
}
.foo.front:nth-child(3), .foo.back:nth-child(3) {
background-image: url("../image/brick3.jpg");
background-size: 100% 100%;
}
.foo.front:nth-child(4), .foo.back:nth-child(4) {
background-image: url("../image/brick1.jpg");
background-size: 100% 100%;
}
.foo.front:nth-child(5), .foo.back:nth-child(5) {
background-image: url("../image/brick2.jpg");
background-size: 100% 100%;
}
.foo.front:nth-child(6), .foo.back:nth-child(6) {
background-image: url("../image/brick3.jpg");
background-size: 100% 100%;
}
Raw
SassMeister-rendered.html
<div class="outer">
<div class="inner">foo</div>
<div class="inner">bar</div>
<div class="inner">bar</div>
<div class="inner">bar</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment