<h1>Quantity Queries mixins demo</h1>
<p>Learn more: <a href="https://github.com/danielguillan/quantity-queries">Github Repo</a></p>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>  
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>  
  <li>9</li>  
  <li>10</li>  
</ul>

ul > li {
 @include at-least(4) {
   color: red;
 }
  
  @include at-most(6) {
    border: solid 1px blue;
  }
  
  @include between(4, 8) {
    background: rgba(green, .25);
  }
  
  @include exactly(8) {
    box-shadow: 0 1px 3px #000;
  }
}




// Styling
body {
  padding: 1em 3em;
}

li {
  display: inline-block;
  padding: 5px;
}