<ul>
  <li></li>
</ul><!-- 仅有一个li -->
<ul>
  <li></li>
  <li></li>
</ul><!-- 有两个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有三个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有四个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有五个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有六个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有七个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有八个li -->

ul li {
  @include at-least(6) {
     border: 2px solid green;
  }
  @include at-most(4) {
    border: solid 1px blue;
  }
  
  @include between(5, 7) {
    box-shadow: 0 0 5px rgba(#000, .5);
    border-radius: 5px;
  }
  
  @include exactly(8) {
    background: orange;
    box-shadow: 0 0 5px rgba(#000, .5);
    border-radius: 5px;
  }
}
//Base style
html,body{
  margin: 0;
  padding: 0;
}
ul {
  margin:10px 0;
  padding: 0;
  list-style: none outside none;
  text-align: center;
  
  li {
    display: inline-block;
    width: 105px;
    height: 105px;
    background: url(https://www.w3cplus.com/sites/default/files/blogs/2015/1507/fig2_squid.png) no-repeat -119px 0;
    background-size: 348px 105px;
    margin: 5px;
  }
}