Sass @media Directive

Sass @media directive is used to set style rules to different media types. Sass both supports and extends the @media rules.

The Sass @media directive can be nested inside the selector SASS but the main impact is displayed to the top level of the stylesheet.

Sass @media Directive Example

Let's take an example to demonstrate the usage of Sass @media directive with multiple assignments and maps. We have an HTML file named "simple.html", having the following data.

HTML file: simple.html

<!DOCTYPE html>
<head>
 <title>Sass @media directive Example</title>
 <link rel="stylesheet" href="simple.css" type="text/css" />
</head>
<body class="container">
    <h2>This is a Sass @media directive example:</h2>
    <img src="C:\Users\javatpoint1\nature.png" class="style">
</body>
</html>

Image:

Create a SCSS file named "simple.scss", having the following data.

SCSS file: simple.scss

h2{
color: violet;
}
.style{
width: 500px;
@media screen and (orientation: portrait){
width:200px;
margin-left: 80px;
}
}

Put the both file inside the root folder.

Now, open command prompt and run the watch command to tell SASS to watch the file and update the CSS whenever SASS file is changed.

Execute the following code: sass --watch simple.scss:simple.css

It will create a normal CSS file named "simple.css" in the same directory automatically.

For example:

Sass Media directive2

The created CSS file "simple.css" contains the following code:

h2 {
  color: violet; }
.style {
  width: 500px; }
  @media screen and (orientation: portrait) {
    .style {
      width: 200px;
      margin-left: 80px; } }

Now, execute the above html file, it will read the CSS value.

Output: