Skip to content

Instantly share code, notes, and snippets.

@airen
Last active August 29, 2015 14:18
Show Gist options
  • Save airen/fe13550fc4fe0994a30c to your computer and use it in GitHub Desktop.
Save airen/fe13550fc4fe0994a30c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
<li>item16</li>
<li>item17</li>
<li>item18</li>
<li>item19</li>
<li>item20</li>
</ul>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
//quantity-queries
//at-least
@mixin at-least($count){
&:nth-last-child(n+#{$count}),
&:nth-last-child(n+#{$count}) ~ & {
@content;
}
}
//at-most
@mixin at-most($count){
&:nth-last-child(-n+#{$count}):first-child,
&:nth-last-child(-n+#{$count}):first-child ~ & {
@content;
}
}
li {
@include at-least(4){
color: red;
}
}
li {
@include at-most(4){
color: green;
background: orange;
}
}
li:nth-last-child(n+4), li:nth-last-child(n+4) ~ li {
color: red;
}
li:nth-last-child(-n+4):first-child, li:nth-last-child(-n+4):first-child ~ li {
color: green;
background: orange;
}
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
<li>item16</li>
<li>item17</li>
<li>item18</li>
<li>item19</li>
<li>item20</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment