- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the role of @media directive in SASS?
In SCSS, multiple rules are available, and every rule provides different functionality. The ‘@media’ rule of the SCSS is almost the same as the media rule of the CSS, which we use to make a responsive design.
In normal CSS, we write the CSS rules inside the media rules, but in SCSS, we can write the media rule inside the CSS rules. So, we can define the different media rules for every element.
In this tutorial, we will learn to use the @media directive in SASS.
Syntax
Users can follow the syntax below to use the @media directive in SASS.
selector {
/* general CSS code */
@media screen and (condtion) {
/* css code */
}
In the above syntax, ‘selector’ is a CSS selector to select the HTML element. Whenever the ‘condition’ of the @media directive becomes true, it applies the related CSS to the HTML element rather than the general CSS.
Example 1
In the example below, we have added the div element with the ‘element’ class name in the index.html file and included the stylesheet path in the <head> tag.
Filename – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> @media directive </i> in SASS </h2>
<div class = "element">
Div element text.
</div>
</body>
</html>
Filename – style.scss
In the below file, we have accessed the div element by the class name and used the @media directive inside the CSS rule. Here, we change the color of the text using the @media directive. When the screen size is above 768px, the colour of the text becomes blue. The text becomes red if the screen size is between 768px and 480px. Otherwise, the text becomes green.
.element {
color: blue;
font-size: 3rem;
@media screen and (max-width: 768px) {
color: red;
}
@media screen and (max-width: 480px) {
color: green;
}
}
On execution, the above SCSS code will produce the following CSS code −
.element {
color: blue;
font-size: 3rem;
}
@media screen and (max-width: 768px) {
.element {
color: red;
}
}
@media screen and (max-width: 480px) {
.element {
color: green;
}
}
Example
<html>
<head>
<style>
.element {
color: blue;
font-size: 3rem;
}
@media screen and (max-width: 768px) {
.element {
color: red;
}
}
@media screen and (max-width: 480px) {
.element {
color: green;
}
}
</style>
</head>
<body>
<h2>Using the <i> @media directive </i> in SASS</h2>
<div class = "element">
Div element text.
</div>
</body>
</html>
Users can observe the below output generated in the style.css file when we compile the code of the scss file. The @media directive of the SASS is converted to the ‘media’ rule of the CSS to make the web page responsive. Also, users can observe the red color of the text according to the screen width.
Example 2
In the example below, we change the dimensions of the image based on the screen size of the device using the @media directive in SASS. The general width of the image is 50%. If the screen width is between 480 to 768 pixels, the image width becomes 80%, and if the screen size is less than 480 pixels, the image width becomes 95%.
Filename – index.html
<html> <head> <link rel = "stylesheet" href = "css/style.css"> </head> <body> <h2>Using the <i> @media directive </i> in SASS.</h2> <img src = "https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821__480.jpg" alt = "Nature Image"> </body> </html>
Filename – style.scss
img {
width: 50%;
height: auto;
margin: 0 auto;
display: flex;
@media screen and (max-width: 768px) {
width: 70%;
}
@media screen and (max-width: 480px) {
width: 95%;
}
}
On execution, the above SCSS code will produce the following CSS code −
img {
width: 50%;
height: auto;
margin: 0 auto;
display: flex;
}
@media screen and (max-width: 768px) {
img {
width: 70%;
}
}
@media screen and (max-width: 480px) {
img {
width: 95%;
}
}
Example
<html>
<head>
<style>
img {
width: 50%;
height: auto;
margin: 0 auto;
display: flex;
}
@media screen and (max-width: 768px) {
img {
width: 70%;
}
}
@media screen and (max-width: 480px) {
img {
width: 95%;
}
}
</style>
</head>
<body>
<h2>Using the <i> @media directive </i> in SASS</h2>
<img src = "https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821__480.jpg" alt = "Nature Image">
</body>
</html>
In the output, users can observe the image width 80% as the screen size is 716px.
Users learned to use the @media directive in SASS. It is used to make a responsive design. The main benefit of the @media directive over the media rule of the CSS is that we can add it inside the CSS rule set and define different breakpoints for every element.
53 Views
