Как перестроить дерево в Media запросах?

Question

[makcimusprime]

Верстаю на Sass. Имеется такая структура. (например)

.main
	.content
		.column
			&.left
				.messages
					.message
                padding-top: 150px

Чтобы изменить паддинг у img при "@Media" нужно повторить всю структуру и уже менять значение. Но если при определенном разрешении меняться должно только 1 свойство и сделать без дерева...

@media screen and (max-width: 767px)
    .message
        padding-top: 100px

...свойство не измениться (не примениться).
Можно ли в Sass сделать так, чтобы структура сохранялась?

Comments

[Ankhena]

Зачем вам такой длины селекторы? Двух, максимум трех уровней вложенности за глаза и за уши должно быть.
Конечно, их не перебить потом.
Читайте htmlbook.ru/samcss/kaskadirovanie

Answer 1

[Ivan Bogachev]

Если я вас правильно понял, то SASS тут не при чем. Почитайте про специфичность селекторов в CSS (это легко гуглится). В крайнем случае можно было бы использовать !important в вашей ситуации, но это только в том случае, если вы понимаете то, зачем вы это делаете, и есть какая-то система его использования во всем проекте.

Но разумнее будет использовать методологии вроде популярного БЭМ или не очень популярного RSCSS. Это будет гораздо лучшим решением по сравнению с попыткой одну бяку закостылить другой.

Answer 2

[Егор Живагин]

Настолько большая вложенность стилей - не всегда хорошо. Попробуйте БЭМ. И про вес селекторов почитайте обязательно

important - зло. Пишите дерево ещё раз.