0

I'm new to scss and I have a short question.

I have this scss code

.page {
    max-width: 1200px;
    position: relative;
    width: 100%;

    ul{
        background-color: black;
        width: 30%;
        height: 100px;

        @media (max-width: 900px){
            background-color: red;
        }
    }

    ul li{
        color: white;

        @media (max-width: 900px){
            color: black;
        }

    }
}

The css file looks like that 

.page {
  max-width: 1200px;
  position: relative;
  width: 100%;
}
/* line 9, style.scss */
.page ul {
  background-color: black;
  width: 30%;
  height: 100px;
}
@media (max-width: 900px) {
  /* line 9, style.scss */
  .page ul {
    background-color: red;
  }
}
/* line 21, style.scss */
.page ul li {
  color: white;
}
@media (max-width: 900px) {
  /* line 21, style.scss */
  .page ul li {
    color: black;
  }
}

The question: is there a way that I just got one media query, cause is 2xtimes max-width: 900px. without getting rid of the nested @media.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Michael
  • 193
  • 5
  • 16

1 Answers1

0

You can try with something like :

.page {
  max-width: 1200px;
  position: relative;
  width: 100%;

  ul {
    background-color: black;
    width: 30%;
    height: 100px;

    li{
      color: white;
    }

    @media (max-width: 900px) {
      background-color: red;

      li{
        color: black;
      }
    }
  }
}
Magicprog.fr
  • 4,072
  • 4
  • 26
  • 35
  • if i try something like this i still get duplicated media. look at this codepen for more: http://codepen.io/anon/pen/gdKci – Michael Oct 24 '14 at 09:51