В SASS вы можете использовать классы-заполнители следующим образом:
%base {
color: red;
}
.example1 {
@extend %base;
border: red 1px solid;
}
.example2 {
@extend %base;
border: blue 1px solid;
}
Что компилируется в:
.example1, .example2 {
color: red;
}
.example1 {
border: red 1px solid;
}
.example2 {
border: blue 1px solid;
}
Однако, если затем сделать что-то вроде (ПОСЛЕ приведенного выше кода):
%base {
font-size: 20px;
}
Я получаю:
.example1, .example2 {
font-size: 20px;
}
Я в замешательстве, как это происходит ... Я думал, что класс-заполнитель просто хранит стили молча, что вы можете затем использовать в качестве кода для повторного использования через расширение ине будет ничего делать сам по себе. Но, похоже, в нем также хранятся данные о том, какие классы его использовали, а затем, если вы объявляете его снова, он отображает дополнительные стили для тех, которые унаследовали ...