Удалить расширенный селектор в SASS

-1

Как удалить конкретный селектор.Удалить расширенный селектор в SASS

Обязательный SASS

.a { 
    .b { 
     .c { 
      .d { 
       .g { 
        ... 
       } 
      } 
     } 

     .c > { 
      .e { 
       .h { 
        ... 
       } 
      } 
      .f { 
       ... 
      } 
     } 
    } 
}

Сформирован

.a .b .c .d .g { ... } 
.a .b .c > .e .h { ... } 
.a .b .c > .f { ... }

Совмещенный SASS

.a { 
    .b { 
     .c > { 
      .d { // remove > for .d 
       .g { 
        ... 
       } 
      } 
      .e { 
       .h { 
        ... 
       } 
      } 
      .f { 
       ... 
      } 
     } 
    } 
}

Сформирован

.a .b .c > .d .g { ... } // extra > 
.a .b .c > .e .h { ... } 
.a .b .c > .f { ... }

Как удалить > селектор для .d и его братьев и сестер в выше ШАОН, так что это эффективно, а не переписывание одного селектора несколько раз?

источник

2015-01-21 VenomVendor

Подобно тому, как в сторону - ваши правила CSS в путь к конкретным, которые вероятно, вызовет проблемы дальше. Более 2 или 3 уровня специфичности, и, вероятно, лучший способ сделать это. – rwacarter

@rwacarter Yup, но это требование. – VenomVendor

Если я вас правильно понял, вы можете добиться этого с помощью @at-root:

.a { 
    .b { 
     .c > { 
      @at-root .a .b .c { 
       .d { 
        .g { 
         color: red; 
        } 
       } 
      } 
      .e { 
       .h { 
        color: red; 
       } 
      } 
      .f { 
       color: red; 
      } 
     } 
    } 
}

Который будет генерировать:

.a .b .c .d .g { 
    color: red; 
} 
.a .b .c > .e .h { 
    color: red; 
} 
.a .b .c > .f { 
    color: red; 
}

источник

2015-01-21 10:04:01 Vucko

Да, есть ли другой способ удалить повторяющиеся '.a .b .c' после' @ at-root'.? Как насчет использования '@ at-root (без: ....)' – VenomVendor

Я сомневаюсь, что это возможно - [ссылка] (https://github.com/sass/sass/issues/774). – Vucko

Манипулирование селекторы не шикарно в Sass.

.a { 
    .b { 
     .c > { 
      @at-root #{set-nth(nth(&, 1), length(nth(&, 1)), '')} { 
       .d { 
        .g { 
         color: red; 
        } 
       } 
      } 
      .e { 
       .h { 
        color: blue; 
       } 
      } 
      .f { 
       color: green; 
      } 
     } 
    } 
}

Выход:

.a .b .c .d .g { 
    color: red; 
} 
.a .b .c > .e .h { 
    color: blue; 
} 
.a .b .c > .f { 
    color: green; 
}

Это гораздо более чистой, чтобы просто гнездо должным образом, в первую очередь:

.a { 
    .b { 
     .c { 
      .d { 
       .g { 
        color: red; 
       } 
      } 
      > .e { 
       .h { 
        color: blue; 
       } 
      } 
      > .f { 
       color: green; 
      } 
     } 
    } 
}

источник

2015-01-21 13:18:08 cimmanon

Это кажется очень сложным, чем существующее, & nesting '.c', используемое более одного раза, я хотел этого избежать. – VenomVendor

Удалить расширенный селектор в SASS

ответ

Смежные вопросы