Как оптимизировать запись SCSS?

Question

[barsukovjke1g]

Помогите описать код более компактно. Смущает класс ".list__link"

.list {
	&__item {
		&:first-child {
			.list__link {
				font-weight: 700;
			}
		}
	}

	&__link {
	    font-size: 1rem;
	    text-transform: uppercase;
	    letter-spacing: 2px;
	    padding: .4rem 0;
	    display: block;
	}
}

Comments

[Алекс Глебов]

Больше путаницы, чтоб никто не разобрался!

Answer 1

[Ivan Bogachev]

Смущает класс ".list__link"

Если вас смущает повторение list в названии класса, то можно воспользоваться сохранением имени в стиле that=this из javascript:

.list {
    $b: &;

    &__item {
        &:first-child {
            #{$b}__link {
                // . . .
            }
        }
    }
}

Но это сложно назвать более читаемым вариантом.

Если цель - все же сделать код более удобоваримым, то может иметь смысл просто ограничить вложенность при написании стилей (именно визуальную вложенность кода, а не каскад), как это делают в том же rscss:

.list {
    &__item {
        // . . .
    }

    &__link {
        // . . .
    }

    &__item:first-child &__link {
        // . . .
    }
}

Comments

[Rustam Bainazarov]

Дополню, что тут используется BEM, а зачем в случае BEM вложенные селекторы? Правильно, не нужны, поэтому , если сдедовать первой структуре, следует использовать @at-root в дополнении к переменной с именем компонента.

.list {
    $self: &; // я люблю так записывать имя компонента, как и западные товарищи

    @at-root #{$self}__item {

        &:first-child {

            #{$self}__link { // тут @at-root не нужен, ибо вложенность нужно сохранить
                //
            }

        }

        @at-root #{$self}__smth {
          //
        }

    }

    @at-root #{$self}__link {
      //
    }

}

Это будет генерировать вот это на выходе, без лишней вложенности:

.list {
    //
}

.list__item {
    //
}

.list__item:first-child .list__link {
    //
}

.list__smth {
    //
}

.list__link {
    //
}