@media 指令设置样式规则到不同的媒体类型。@media 指令可以嵌套在选择器SASS中，但它会冒泡到样式表的顶层。
以下示例演示如何在SCSS文件中使用 @media :
<!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 。
h2{
color: #77C1EF;
}
.style{
width: 900px;
@media screen and (orientation: portrait){
width:500px;
margin-left: 120px;
}
}
您可以通过使用以下命令让SASS查看文件，并在SASS文件更改时更新CSS:
sass --watch C:rubylibsassmedia.scss: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文件，将显示如下输出。
SASS使用一组称为SassScript的小型扩展，可以包含在SASS文档中，以从属性值计算变量，并使用变量，算术和其他函数的属性。SassSc...
描述SASS提供了具有多个赋值和映射的 @each 指令。 我们将从下表中逐一讨论它们。序号指令类型和描述1 @each该变量包含列表中每...
使用命令行，我们可以将 .less 文件编译为 .css 。安装lessc以供全局使用以下命令用于使用npm(node package manager)安装lessc，...
使用了CSS3 border-radius属性的界面显示如下图： CSS3 圆角使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。您可...
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。CSS3动画CSS3 @keyframes 规则表格中的数字表...
本章节我们为大家介绍使用 CSS 来制作按钮。基本按钮样式默认按钮CSS 按钮CSS 实例.button { background-color: #4CAF50; border...
CSS Margin(外边距) CSS Margin (外边距)属性定义元素周围的空间。CSS Margin 属性接受任何长度单位、百分数值甚至负值。Margin ...
