SCSS: Улучшение производительности

Question

У нас есть проект, построенный в Extjs и scss. Мы хотим улучшить производительность scss. Мы использовали черновую SCSS-нибудь вкусненькое, и получение ниже результата

NestingDepth: Nesting should be no greater than 3, but was 4 

Как мы уменьшаем вложенности до 3-го уровня? Есть ли способ, который помогает нам улучшить производительность scss?

Обновлено. Пожалуйста, ознакомьтесь с приведенным ниже примером.

.x-grid-row, 
    .x-grid-row-alt { 
    color: $white-font-color !important; 

    &.x-grid-row, 
    &.x-grid-row-over { 
     color: $white-font-color !important; 

     .x-grid-cell { 
     color: $white-font-color !important; 

     &.clickable-grid-cell { 
      color: $white-font-color !important; 

      &:hover { 
      color: $white-font-color !important; 
      } 

      .x-grid-cell-inner { 
      color: $white-font-color !important; 

      div { 
       color: $white-font-color !important; 
      } 

      &:hover { 
       color: $white-font-color !important; 

       div { 
       color: $white-font-color !important; 
       } 
      } 
      } 
     } 
     } 
    } 
    } 

Answer 1

Хороший принцип помнить при использовании вложенности функции в SASS/SCSS: Просто потому, что вы можете, не означает, что вы должны. Лучше всего сохранить свою специфику как можно ниже, а это означает, что вам нужно только гнездо, когда вам НУЖНО.

Есть ли способ, которым вы могли бы разобрать это отдельно и иметь правила на отдельных строках вместо гнездования? Ваша ошибка исчезнет.

Что касается производительности SCSS, не беспокойтесь об этом. В этом и заключается препроцессор: он делает тяжелую работу, прежде чем нанести удар по браузеру. Вы ДОЛЖНЫ начать беспокоиться, если вы используете плохую практику и в конечном итоге раздуваете свой CSS для пользователя в браузере. Но я действительно не вижу в этом беспокойства.