Updated April 4, 2023
Definition of SASS @media
The fragment of front-end creation is the use of media queries in CSS as a part of responsive websites. It has also become standard practice to use pre-processors to make them more convenient to write, and easier to maintain. The @media directive is one of the techniques which can be used to ensure our website layouts adapt to a variety of devices.
This directive allows content to render and adapt to conditions such as screen resolution. The @media directive could be embedded within the SASS selector but is popped to the top of the stylesheet. The @media directive is one of the commonly used methods for ensuring the media content is displaying in a responsive way.
Syntax:
The syntax for SASS @media directive can be written as shown below:
element_name {
font-size: 20px;
@media (max-width: 600px) {
font-size: 22px;
color:blue;
}
}For Instance:
element_name {
color: red;
}
.class_name {
width: 600px;
@media screen and (orientation: landscape) {
width:600px;
margin-left: 100px;
}
}When you compile the above scss, you will have the following style code in the css as shown below:
element_name {
color: red;
}
.class_name {
width: 600px;
}
@media screen and (orientation: landscape) {
.class_name{
width:600px;
margin-left: 100px;
}
}How does @media Directive Work in SASS?
The important purpose of @media directive is to set style rules for various kinds of media types and could be nested inside the SASS selector. When we work with this directive by making the code more concise, it prevents the writing of the CSS rule twice. This also specifies that all code related to this specific rule is in the same place.
Examples to Implement @media Directive in SASS
Let’s create an example to make use of the @media directive in SASS. Here, we have created an HTML file called example1.html with the below code:
Example #1
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS @media Directive Example </title>
<link rel="stylesheet" type="text/css" href="sass_atmedia.css"/>
</head>
<body>
<h1> Hello World...</h1>
<div class="styledemo">
<h2> Welcome to EDUCBA... !!!</h2>
<p>It is a leading global provider of skill based education. It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.</p>
<p>Educba is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain.</p>
</div>
</div>
</body>
</html>Now create a file called sass_atmedia.scss with the below code:
sass_atmedia.scss
.styledemo {
background-color: lavender;
@media only screen and (orientation: landscape){
.styledemo {
background-color: lightblue;
border: 2px solid grey;
}
}
}Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.
sass –watch sass_atmedia.scss: sass_atmedia.cssNow, execute the file with the above command and it will create the sass_atmedia.css file with the below code:
sass_atmedia.css
.styledemo {
background-color: lavender;
}
@media only screen and (orientation: landscape) {
.styledemo .styledemo {
background-color: lightblue;
border: 2px solid grey;
}
}Output:
Now, execute the below steps to execute the above code.
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
The above example is used to change the layout of a page depending on the orientation of the browser. It will display the light blue background color if the landscape mode is oriented. When the landscape orientation width is larger than the height of the document, then the background color will be light blue, otherwise, it will display a lavender color.
Example #2
Create an HTML file called example2.html with the below code:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS @media Directive Example </title>
<link rel="stylesheet" type="text/css" href="sass_atmedia1.css"/>
</head>
<body class = "container">
<h2> Welcome to EDUCBA...</h2>
<imgsrc = "https://www.shareasale.com/images/edu-logo.jpg" class = "educba_logo">
</body>
</html>Now create a file called sass_atmedia1.scss with the below code:
sass_atmedia1.scss
h2 {
color: #4682B4;
}
.educba_logo {
width: 600px;
@media screen and (orientation: landscape) {
width: 400px;
margin-left: 100px;
}
}Execute the file with the above command shown in the previous example and it will create the sass_atmedia1.css file with the below code:
sass_atmedia1.css
h2 {
color: #4682B4;
}
.educba_logo {
width: 600px;
}
@media screen and (orientation: landscape) {
.educba_logo {
width: 400px;
margin-left: 100px;
}
}Output:
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image
Example #3
Create an HTML file called example3.html with the below code:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS @media Directive Example </title>
<link rel="stylesheet" type="text/css" href="sass_atmedia2.css"/>
</head>
<body>
<h1> Hello World...This is @media directive example using variables...</h1>
<div class="styledemo">
<h2> Welcome to EDUCBA... !!!</h2>
<p>It is a leading global provider of skill based education. It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.</p>
<p>Educba is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain.</p>
</div>
</div>
</body>
</html>Now create a file called sass_atmedia2.scss with the below code:
sass_atmedia2.scss
$media_backgroundcolor: lavender;
$media_color: #FF00FF;
$media_fontsize: 22px;
.styledemo {
background-color: $media_backgroundcolor;
color: $media_color;
@media only screen and (orientation: landscape){
.styledemo {
background-color: lightblue;
border: 2px dotted grey;
font-size: $media_fontsize;
}
}
}Execute the file with the above command shown in the previous example and it will create the sass_atmedia2.css file with the below code:
sass_atmedia2.css
.styledemo {
background-color: lavender;
color: #FF00FF;
}
@media only screen and (orientation: landscape) {
.styledemo .styledemo {
background-color: lightblue;
border: 2px dotted grey;
font-size: 22px;
}
}Output:
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
Conclusion
In this article, we have seen how @media directive can be used to ensure the websites are responsive by using with them the Sass pre-processing language.The @media directive can be applied to allow numerous values to be specified to properties of selectors based upon the width of the viewport. The ability of SASS is to isolate elements inside a CSS rule enables media queries to be related more closely to the CSS rule, results in a more user-friendly and understandable codebase. We can have styles to only those screens which are larger, or smaller, than a specific width by using the @media directive.
Recommended Articles
This is a guide to SASS @media. Here we also discuss the definition and how does @media directive work in sass? along with different examples and code implementation. You may also have a look at the following articles to learn more –
