SASS 中 @media 指令的作用是什么?

cssweb developmentfront end technology更新于 2024/5/4 16:12:17

SCSS 中有多个规则可用，每个规则提供不同的功能。SCSS 的"@media"规则与我们用于实现响应式设计的 CSS 媒体规则几乎相同。

在普通 CSS 中，我们将 CSS 规则编写在媒体规则中，但在 SCSS 中，我们可以将媒体规则编写在 CSS 规则中。因此，我们可以为每个元素定义不同的媒体规则。

在本教程中，我们将学习如何在 SASS 中使用 @media 指令。

语法

用户可以按照以下语法在 SASS 中使用 @media 指令。

selector {
/* 常规 CSS 代码 */
@media screen and (condtion) {
/* CSS 代码 */
}

在上述语法中，"selector"是一个用于选择 HTML 元素的 CSS 选择器。每当 @media 指令的"条件"为真时，它会将相关的 CSS 应用于 HTML 元素，而不是常规 CSS。

示例 1

在下面的示例中，我们在 index.html 文件中添加了带有"element"类名的 div 元素，并在 <head> 标签中包含了样式表路径。

文件名 - 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%;
   }
}

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 指令。它用于创建响应式设计。相对于 CSS 的媒体规则，@media 指令的主要优势在于，我们可以将其添加到 CSS 规则集中，并为每个元素定义不同的断点。