!optional նշումը @extend-ում SASS-ում

Սելեկտորը ընդլայնելիս կարելի է բախվել սխալի, երբ @extend դիրեկտիվան ոչ ճիշտ է աշխատել: Օրինակ, եթե դուք ունեք հետևյալ կոդը:

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

Եթե ոչ մի սելեկտոր չի պարունակի .main, ապա կոմպիլյացիայի ժամանակ կառաջանա սխալ: Այդպիսի դեպքում մեզ անհրաժեշտ է միավորել սելեկտորների հաջորդականությունները, ինչի համար մենք օգտագործում ենք @extend դիրեկտիվան:

Բացի այդ, սխալ կառաջանա, եթե .main պարունակող սելեկտորը լինի այսպիսին. h1.main, ինչը բացատրվում է a և h1 միջև առկա կոնֆլիկտով:

Հետևաբար, անհրաժեշտության դեպքում դուք կարող եք թույլատրել @extend դիրեկտիվային չստեղծել նոր սելեկտորներ՝ օգտագործելով ոչ պարտադիր լինելու !optional նշումը, գրված սելեկտորից հետո: Օրինակ:

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