Skip to content

Instantly share code, notes, and snippets.

@johanbrook
Created February 3, 2011 13:48
Show Gist options
  • Save johanbrook/809484 to your computer and use it in GitHub Desktop.
Save johanbrook/809484 to your computer and use it in GitHub Desktop.
The beauty of Sass: creating loops directly in the stylesheet. In this one I've created a @for loop which is shifting the background sprite for each section. No need for a bunch of background-position declarations.
& > section{
float: left;
margin-right: $lineheight;
width: $wideColumn;
background: transparent url(style/images/frontpage-icons.png) no-repeat left top;
padding-top: $column;
@for $i from 2 through 4 {
&:nth-child(#{$i}){
$i: $i - 1;
background-position: -224px*$i top;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment