Не работает !important в sass, что делать?

Question

[OldSchoolWeb]

Уже минут 30 мучаюсь, если не больше. Как устроен !important в media запросах?
Доп. есть див, внутри него иконки

<div class="social">
<a href="#"><i class="icon vk"></i></a>
<a href="#"><i class="icon instagram"></i></a>
<a href="#"><i class="icon facebook"></i></a>
</div>

На 1200px все иконки должны показываться, на 991 - facebook убран , на 480 - все показываются
Вот хоть убей, не могу реализовать это.

@media only screen and (max-width : 991px)
.social_wrapper
  text-align: center
  a
    padding: 0 !important
    margin: 0
    z-index: 5
    i.facebook
      display: none !important
@media only screen and (min-width : 480px)
.social_wrapper
  text-align: center
  a
    padding: 0 !important
    margin: 0
    z-index: 5
    i.facebook
      display: block !important

Answer 1

[Givandos]

(min-width : 480px)
Исправь на max-width.
У тебя этот блок классов перебивает все, что идут выше

Comments

[OldSchoolWeb]

Блин, действительно... спасибо. Что-то даже не ловко стало

Answer 2

[Олег]

Во-первых прекращай использовать important - это плохая практика. Если без них нельзя обойтись, значит что-то не так.

Во-вторых не надо в медиа-запросах писать одинаковые стили. Там ты пишешь только различия.

В-третьих лучше придерживаться либо только max-width, либо min-width. Не надо мешать всё это в кучу. Тебе же проще потом будет.

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

.social_wrapper
	text-align: center

	a
		padding: 0
		margin: 0
		z-index: 5

@media only screen and (min-width : 480px)
.social_wrapper

	i.facebook
		display: none

@media only screen and (min-width : 991px)
.social_wrapper

	i.facebook
		display: block