极客笔记什么是SASS中的@media指令的作用
在SCSS中，有多个规则可用，每个规则提供不同的功能。SCSS的’@media’规则几乎与CSS的媒体规则相同，我们用它来制作响应式设计。
在普通的CSS中，我们将CSS规则写在媒体规则中，但是在SCSS中，我们可以在CSS规则中写媒体规则。因此，我们可以为每个元素定义不同的媒体规则。
在本教程中，我们将学习如何在SASS中使用@media指令。
语法
请按照以下语法使用SASS中的@media指令。
selector {
/* general CSS code */
@media screen and (condtion) {
/* css code */
}
在上述语法中，‘selector’是一个用于选择HTML元素的CSS选择器。当@media指令的‘condition’变为真时，它会将相关的CSS应用于HTML元素，而不是通用的CSS。
示例1
在下面的示例中，我们在index.html文件中添加了带有‘element’类名称的div元素，并将样式表路径包含在
标签中。文件名 – 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>
文件名 – style.scss
在下面的文件中，我们通过类名访问了div元素，并在CSS规则内使用了@media指令。在这里，我们使用@media指令来改变文本的颜色。当屏幕尺寸大于768px时，文本的颜色变为蓝色。如果屏幕尺寸在768px和480px之间，则文本变为红色。否则，文本变为绿色。
.element {
color: blue;
font-size: 3rem;
@media screen and (max-width: 768px) {
color: red;
}
@media screen and (max-width: 480px) {
color: green;
}
}
在执行上述SCSS代码后，将产生以下CSS代码：
.element {
color: blue;
font-size: 3rem;
}
@media screen and (max-width: 768px) {
.element {
color: red;
}
}
@media screen and (max-width: 480px) {
.element {
color: green;
}
}
示例
<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>
当我们编译scss文件的代码时，用户可以观察到在style.css文件中生成的以下输出。SASS的@media指令转换为CSS的’media’规则，使网页具有响应式的特性。此外，用户可以根据屏幕宽度观察到文本的红色。
示例2
在下面的示例中，我们使用SASS的@media指令根据设备的屏幕大小更改图像的尺寸。图像的一般宽度为50%。如果屏幕宽度在480到768像素之间，图像的宽度变为80%，如果屏幕尺寸小于480像素，图像的宽度变为95%。
文件名 – 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>
文件名 – 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%;
}
}
执行上面的SCSS代码会生成以下CSS代码：
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%;
}
}
示例
<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>
在输出中，用户可以观察到图像宽度为屏幕尺寸的80%，屏幕尺寸为716px。
用户学会了在SASS中使用@media指令。它用于制作响应式设计。@media指令相比于CSS的媒体规则的主要优点是我们可以将其添加到CSS规则集中，并为每个元素定义不同的断点。