@extend ішіндегі !optional белгісі SASS-та

Селекторды кеңейткен кезде, @extend директивасы дұрыс жұмыс істемеген жағдайда қателікке тап болуыңыз мүмкін. Мысалы, егер сізде келесі код болса:

style.scssa.info {
  @extend .main;
}

Ешбір селектор .main қамтымаса, онда компиляция кезінде қателік болады. Мұндай жағдайда бізге селекторлар тізбегін біріктіру керек, ол үшін біз @extend директивасын қолданамыз.

Сонымен қатар, егер селектор .main қамтылған болса, мысалы: h1.main, онда да қателік болады, бұл a және h1 арасындағы қайшылықтан туындайды.

Сондықтан, қажет болған жағдайда, сіз @extend директивасына селектордан кейін жазылған міндетті емес екенін көрсететін !optional белгісін қолданып, жаңа селекторлар жасамауға рұқсат ете аласыз. Мысалы:

style.scssa.info {
  @extend .main !optional;
}