Linux SRV-16 6.18.44-paas #1 SMP PREEMPT_DYNAMIC Thu Aug 13 10:08:12 UTC 2026 x86_64
/srv/data/web/vhosts/www.shinegis.mu/htdocs/functions/scssphp/tests/inputs/
/srv/data/web/vhosts/www.shinegis.mu/htdocs/functions/scssphp/tests/inputs/media.scss
 
// media syntax
@media what {
    div { color: blue; }
}

@media (cool) {
    div { color: blue; }
}
@media (cool: blue) {
    div { color: blue; }
}

@media hello and (world) and (butt: man) {
    div { color: blue; }
}

$navbarCollapseWidth: 940px;

@media (max-width: $navbarCollapseWidth) {
    a {
        color: red;
    }
}

// media bubbling
@media not hello and (world) {
   pre {
       color: blue;
   }

   @media butt {
       div {
           color: red;
       }
   }
}

@media a, b {
    @media c {
        a {
            color: blue;
        }
    }
}

@media a{
    @media b, c {
        a {
            color: blue;
        }
    }
}

@media a, b{
    @media c, d {
        a {
            color: blue;
        }
    }
}

@media all, b {
    @media c {
        a {
            color: blue;
        }
    }
}

$media: cree;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

div {
    color: blue;
    @media s#{$media}n and ($feature: $value) {
        .sidebar {
            width: 500px;
        }
    }
}

// @media + @mixin
@mixin color {
    color: red;
    .success {
         color: green;
    }
}

div {
    position: absolute;
    $y: 2em;
    @media screen {
        top: 0;
        $x: 5px;
        p {
            margin: $x;
        }
        bottom: 6em + $y;
        @include color;
    }
}

.button {
  width: 300px;
  height: 100px;
  background: #eee;

  :hover {
    background: #aaa;
  }

  @media only screen and (max-width : 300px){
    width: 100px;
    height: 100px;
  }
}

code {
    position: absolute;
    @media screen {
        pre {
            height: 20px;
        }
        height: 10px;
    }
}

dt {
    @media screen {
        @media (color: 8) {
            height: 10px;
        }
    }
}

// nesting media queries
@media screen {
    .screen {
        width: 12px;
    }
    @media only screen {
        .only-screen {
            height: 11px;
        }
    }
}

@media only screen {
    .only-screen {
        width: 14px;
    }
    @media only screen {
        .only-screen {
            height: 16px;
        }
    }
}

@media not screen {
    @media screen {
        .invalid {
            height: 12px;
        }
    }
}

@media not screen {
    @media print {
        .only-print {
            height: 12px;
        }
    }
}

@media screen {
    @media not print {
        .only-print {
            height: 12px;
        }
    }
}

@media not screen {
    @media not print {
        .invalid {
            height: 12px;
        }
    }
}

@media not screen {
    @media not screen {
        .not-screen {
            height: 15px;
        }
    }
}

@media only screen {
    @media print {
        .invalid {
            height: 15px;
        }
    }
}

@media only screen {
    @media screen and (color: 8) {
        @media screen and (width: 13px) {
            .only-screen {
                height: 15px;
            }
        }
    }
}

@media screen and (max-width: 749px) {
  @media screen and (max-width: 600px) and (min-width: 361px) {
    .item {
      color:red;
    }
  }
}

a {
  @media not all and (max-width: 450px) {
  	@media not all and (max-width: 690px) and (orientation: portrait) {
	  	@media (max-width: 1000px) {
		  	color: red;
		  }
	  }
  }
}

a {
  @media not all and (max-width: 450px) {
  	@media all and (max-width: 690px) and (orientation: portrait) {
	  	@media (max-width: 1000px) {
		  	color: red;
		  }
	  }
  }
}

a {
  @media all and (max-width: 450px) {
  	@media not all and (max-width: 690px) and (orientation: portrait) {
	  	@media not all and (max-width: 1000px) {
		  	color: red;
		  }
	  }
  }
}