Skip to content

Instantly share code, notes, and snippets.

@CheetoMao
Created September 18, 2015 16:52
Show Gist options
  • Save CheetoMao/ca13aca1b85014a5ce52 to your computer and use it in GitHub Desktop.
Save CheetoMao/ca13aca1b85014a5ce52 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
// ----
// libsass (v3.2.5)
// ----
@mixin quantity-query( $number, $comparison: 'equal' ) {
@if index( ('greater' 'more' '>'), $comparison ) {
$nth: 'n + #{$number}';
} @else if index( ('less' 'fewer' '<'), $comparison ) {
$nth: '-n + #{$number}';
} @else if index( ('equal' 'same' '='), $comparison ) {
$nth: $number;
} @else {
@warn "Sorry, that’s an invalid $comparison value."
}
&:nth-last-child(#{$nth}):first-child {
&,
& ~ * {
@content;
}
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
li {
background: #F0F;
display: inline-block;
height: 200px;
width: 200px;
}
}
li {
@include quantity-query(7, equal) {
background: blue;
&:first-child {
background: green;
}
}
@include quantity-query(6, equal) {
background: blue;
&:first-child {
background: red;
}
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
background: #F0F;
display: inline-block;
height: 200px;
width: 200px;
}
li:nth-last-child(7):first-child,
li:nth-last-child(7):first-child ~ * {
background: blue;
}
li:nth-last-child(7):first-child:first-child,
li:nth-last-child(7):first-child ~ *:first-child {
background: green;
}
li:nth-last-child(6):first-child,
li:nth-last-child(6):first-child ~ * {
background: blue;
}
li:nth-last-child(6):first-child:first-child,
li:nth-last-child(6):first-child ~ *:first-child {
background: red;
}
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment