@barsukovjke1g

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

Помогите описать код более компактно. Смущает класс ".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;
	}
}
  • Вопрос задан
  • 157 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Смущает класс ".list__link"

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

.list {
    $b: &;

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

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

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

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

    &__link {
        // . . .
    }

    &__item:first-child &__link {
        // . . .
    }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы