Skip to content

Instantly share code, notes, and snippets.

@maximelebreton
Created October 12, 2016 12:37
Show Gist options
  • Save maximelebreton/2c747eede2ab283dc9ea56048cb7d1d5 to your computer and use it in GitHub Desktop.
Save maximelebreton/2c747eede2ab283dc9ea56048cb7d1d5 to your computer and use it in GitHub Desktop.
Patrick Clancey's CSS Mod Queries and Range Selectors
// http://alistapart.com/article/using-css-mod-queries-with-range-selectors
// range selector mixin
@mixin select-range($start, $end){
&:nth-child(n+#{$start}):nth-child(-n+#{$end}){
@content;
}
}
// mod query mixin
@mixin mod-list($mod, $remainder){
&:nth-last-child(#{$mod}n+#{$remainder}):first-child,
&:nth-last-child(#{$mod}n+#{$remainder}):first-child ~ li {
@content;
}
}
li {
@include mod-list(3, 0){
@include select-range(3, 5){
// styles for items 3 to 5 in a list mod 3 remainder = 0
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment