Метката !optional во @extend во SASS

При проширување на селекторот може да наидете на грешка, кога директивата @extend не функционираше правилно. На пример, доколку го имате следниот код:

a.info {
	@extend .main;
}

Доколку ниту еден селектор не ја содржи .main, ќе се случи грешка при компајлирање. Во таков случај, ние треба да ги комбинираме низите од селектори, за што ја користиме директивата @extend.

Покрај тоа, ќе има грешка ако селекторот кој ја содржи .main е како: h1.main, што се објаснува со конфликт помеѓу a и h1.

Затоа, доколку е потребно, можете да дозволите на директивата @extend да не креира нови селектори со помош на метката за опционалност !optional, запишана после селекторот. На пример:

a.info {
	@extend .main !optional;
}