serii81
@serii81
Я люблю phр...

Почему не переопределяются стили?

Добрый день.
Я использую pug и stylus.
Вот код из pug
.logo.header-main__logo.header-main__item
				img.logo__img(src="assets/i/logo.jpg", alt="logo")
				span.logo__text Продажа стройматериалов

			include navigation/catalog-nav

			.header-main__search.header-main__item.search
				input.input.input--size-small.search__input(type="text" placeholder="Артикул или название товара")
				+icon('search__icon', 'search')
			include order-callback
			include basket-prev


К каждому элементу header-main добавил класс header-main__item

Прописал стили для них
.header-main
	padding 20px 0
	color white
	background deep-teal

	&__item
		&:not(:last-child)
			margin-right 30px
			background green


И на разрешении меньше 1240px поменял порядок последних двух элементов.
.header-main
	&__logo
		@media screen and (max-width xl)
			order 1
	&__catalog-nav
		@media screen and (max-width xl)
			order 2
	&__search
		@media screen and (max-width xl)
			order 3
	&__order-callback
		@media screen and (max-width xl)
			order 5
			margin-left auto
			margin-right 0
	&__basket-prev
		margin-left auto
		@media screen and (max-width xl)
			order 4
			margin-left 0
			margin-right 30px


Теперь, чтобы отменить margin у последнего элемента, который сейчас является 4, я задаю ему margin-right 0.

Только стили не применяются.
Вот как я подключил файлы
.header-main
	padding 20px 0
	color white
	background deep-teal

	&__item
		&:not(:last-child)
			margin-right 30px
			background green

	.container
		position relative
		display flex
		align-items center

@import 'header-main';


Есть файлы header.styl и в нем импортировал файл header-main

Вот результат в браузере
5cd692c0d6b2b429960889.jpeg

Вроде бы все правильно сделал, но что-то упустил.

Это треннировочный проект, посему могу кинуть ссылку venevsky.host1670806.hostland.pro/build

Заранее благодарен за подсказку.
  • Вопрос задан
  • 105 просмотров
Решения вопроса 1
serii81
@serii81 Автор вопроса
Я люблю phр...
Проблему решил.
Все дело во вложенности.
.header-main
	.container
		position relative
		display flex
		align-items center
		& > *
			 &:not(:last-child)
					margin-right 40px
					@media screen and (max-width xl)
						margin-right 30px

		.header-main__order-callback
			margin-right 0

		@media screen and (max-width xl)
			order 5
			margin-left auto
			margin-right 0

	&__order-callback
		@media screen and (max-width xl)
			order 5
			margin-left auto
			margin-right 0
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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