title: Why does child selector > not work with media queries in sass?
body: <p>Suppose in a situation I need child selector in css so I'd do with scss it as:  </p>
  
  <pre><code>#bslider {
       &gt; img {
             display: block;
          }
       &gt; #slide {
          .carousel-inner {
              perspective: 1000;
          }
  
      }
  }
  </code></pre>
  
  <p>So <code>&gt;</code> child selecter works good in scss. But now consider if I need media query too so I'd do it as:  </p>
  
  <pre><code>#bslider {
       &gt; img {
             display: block;
          }
       &gt; @media only screen {
          .carousel-inner {
              perspective: 1000;
          }
  
      }
  }
  </code></pre>
  
  <p>But it gives error because of media query. Why can't I use <code>&gt;</code> before <code>@media</code> rule?</p>
  
  <p>As suggested that I should use <code>&gt;</code> before id, class or tag used as selector. But I'd have to add it to all selectors is their any way to acheive this:  </p>
  
  <pre><code>#bslider {
  
      &gt; img {
        display: block;
      }
        @media only screen &gt; {
           .carousel-inner {
              perspective: 1000;
          }
          .img {
            display: inline;
          }
  
          .img2 {
            display: inline-block;
          }
  
  
      }
  }
  </code></pre>