-(1..8).each do |i|
%div.texture
View Compiled
html { background: silver; }
.texture {
display: inline-block;
width: 16em; height: 9em;
background:
linear-gradient(45deg,
transparent 2px, dimgrey 2px, dimgrey 3px, transparent 3px),
linear-gradient(-45deg,
transparent 2px, dimgrey 2px, dimgrey 3px, transparent 3px)
darkgrey;
@for $i from 1 through 8 {
&:nth-child(#{$i}) { background-size: #{3 + $i}px #{3 + $i}px; }
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.