WebDEV(@webb_dev). 💡 Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss

💡 Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss Великая сила амперсанда в Sass позволяет писать стили по БЭМ и делать это еще нагляднее. Такой код:

.block {
    font-size: 1.2rem;
    &--dark {
        background: #000;
    }
    &__element {
        text-aling: center;
        &--big {
            width: 100%;
        }
        .ie9 & {
            &::before {
                content: 'hello ie'
            }
        }
    }
}

Будет скомпилирован в:

.block {
    font-size: 1.2rem;
}

.block--dark {
    background: #000;
}

.block__element {
    text-aling: center;
}

.block__element--big {
    width: 100%;
}

.ie9 .block__element::before {
    content: "hello ie";
}

Когда есть такой удобный инструмент, даже речи быть не может о повторе и переопределении стилей для одного блока. Если селектор .block уже написан в каком-то документе, то в другом документе его быть не должно. Продолжение следует... WebDEV #советы #web