Sass @media指令用于将样式规则设置为不同的媒体类型。 Sass支持并扩展@media规则。
Sass @media指令可以嵌套在选择器SASS内, 但主要影响显示在样式表的顶层。
Sass @media指令示例
让我们以一个示例来演示Sass @media指令与多个分配和映射的用法。我们有一个名为”
simple.html”
的HTML文件, 其中包含以下数据。
HTML档案:simple.html
<
!DOCTYPE html>
<
head>
<
title>
Sass @media directive Example<
/title>
<
link rel="stylesheet" href="http://www.srcmini.com/simple.css" type="text/css" />
<
/head>
<
body class="container">
<
h2>
This is a Sass @media directive example:<
/h2>
<
img src="C:\Users\srcmini1\nature.png" class="style">
<
/body>
<
/html>
图片:
文章图片
创建一个名为” simple.scss” 的SCSS文件, 其中包含以下数据。
SCSS文件:simple.scss
h2{color: violet;
}.style{width: 500px;
@media screen and (orientation: portrait){width:200px;
margin-left: 80px;
}}
将两个文件都放在根文件夹中。
现在, 打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。
执行以下代码:sass – watch simple.scss:simple.css
它将在同一目录中自动创建一个名为” simple.css” 的普通CSS文件。
例如:
文章图片
创建的CSS文件” simple.css” 包含以下代码:
h2 {color: violet;
}.style {width: 500px;
}@media screen and (orientation: portrait) {.style {width: 200px;
margin-left: 80px;
} }
现在, 执行上面的html文件, 它将读取CSS值。
【Sass @media指令用法示例】输出
文章图片
推荐阅读
- Sass mixin参数
- Sass(包含mixin用法)
- Sass继承/扩展用法详解
- SASS @import指令用法
- Sass @ else-if指令用法示例
- Sass @each指令用法示例
- Android开发(java.net.SocketException: Permission denied问题解决)
- Qt QApplication::processEvents();//不停地处理事件,让程序保持响应
- android sdk 如何重新生成debug.keystore