Как я могу соответствовать 4 правилам гнезда?

Question

Я работаю над некоторыми CSS, и я использую GRUNT.js для наложения кода. Правила листинга имеют ограничение на 4 гнезда, как я могу изменить код ниже, чтобы соответствовать этому правилу?

.footer { 
    .footer-tools { 
     a { 
      padding-left: 10px; 
      padding-right: 10px; 
      color: $color-alpha; 
      font-weight: bold; 
      margin-left: 48px; 

      &:hover { 
       text-decoration: none; 
      } 

      &.fill { 
       .icon { 
        color: $color-horizon; 
       } 

       .cart-qty { 
        display: inline; 
       } 
      } 
     } 
    } 
} 

В частности, это правила .icon и .cart-qty, нарушающие правила. Если бы попытались сломать эти классы в отдельное правило под названием a.fill, но инструмент для перевязки попросил меня объединить его с исходным правилом, и это вернет меня к квадрату 1:/

Любая помощь будет принята с благодарностью

Answer 1

.footer, .footer-tools и a имеют только одного ребенка, так что вы можете записать его в одном селекторе .footer .footer-tools a и ваш вложенный уровень будет 3 Intead из 5