Почему import и в SASS/SCSS плохо работает?

Question

[Артур Белан]

Почему import и в SASS/SCSS плохо работает?
Пишу импорты:

@import "null-style.scss"; //Сброс стилей
@import "general-classes.scss"; //Общие стили для многократного использования 

// ...
//Тут SCSS для разных секций
// ...
// ...
// ...

Суть в том что некоторые стили не конвертирует плагин в vscode

Comments

[Ольга]

некоторые - это какие? возможно они не конвертируются из-за синтаксических ошибок?

[Артур Белан]

Ольга,
К примеру:

.line-name {
    @extend %over-title;
    padding-bottom: 0px; // Не работает
}
%over-title {
    padding-bottom: 25px;
    font-family: $font-two;
    font-weight: lighter;
    @include adaptiv-font(24, 16);
    color: $color-black;
}

Получается по идеи я указываю padding-bottom: 0px а по факту 25. Почему?

[Froggyweb]

сделай песочницу
по идее у тебя @extend %over-title; вообще не должен работать
т.к. %over-title объявлен ниже

[Артур Белан]

Froggyweb, Не-не, это же наследование. То есть мне нужно родителя выше указывать?

[Ольга]

Belartale, да, вы получается в вашем примере указываете сначала padding-bottom: 0px; а затем он переопределяется padding-bottom: 25px; из extends, если указать то что в extends выше, то переопределится как вам нужно. В вашем примере на выходе получается вот что:

.line-name {
  padding-bottom: 0px; }

.line-name {
  padding-bottom: 25px;
  font-family: Arial;
  font-weight: lighter;
  color: black; }

Extends так работает, при компиляции все доп.стили которые есть у тега помимо стилей из расширения, будут оформлены отдельным блоком. А если несколько селекторов имеют один extends, то они при компиляции будут в один блок оформляться.