阅读(2.3k) 书签赞(0) 我要纠错

Sass 媒体指令

2018-12-30 16:59 更新

描述

@media 指令设置样式规则到不同的媒体类型。@media 指令可以嵌套在选择器SASS中，但它会冒泡到样式表的顶层。

例子

以下示例演示如何在SCSS文件中使用 @media :

media.html

<!doctype html>
<head>
	<title>Media directive Example</title>
	<link rel="stylesheet" href="media.css" type="text/css" />
</head>
<body class="container">
    <h2>Example using media directive</h2>
    <img src="/attachments/tuploads/sass/birds.jpg" class="style">
</body>
</html>

接下来，创建文件 media.scss 。

media.scss

h2{
color: #77C1EF;
}

.style{
width: 900px;

@media screen and (orientation: portrait){
width:500px;
margin-left: 120px;
}
}

您可以通过使用以下命令让SASS查看文件，并在SASS文件更改时更新CSS:

sass --watch C:\ruby\lib\sass\media.scss:media.css

接下来执行上面的命令，它将自动创建 media.css 文件，代码如下:

media.css

h2 {
  color: #77C1EF;
 }

.style {
  width: 900px;
  }
  @media screen and (orientation: portrait) {
    .style {
      width: 500px;
      margin-left: 120px;
      }
  }

输出

让我们执行以下步骤，看看上面的代码如何工作:

将以上html代码保存在 media.html 文件中。
在浏览器中打开此HTML文件，将显示如下输出。

以上内容是否对您有帮助：

写笔记

我要补充