Sass @media指令

本节我们学习 Sass 中的 @media 指令，@media 指令用于设置样式规则到不同的媒体类型，这和 CSS 的使用规则差不多，但是它还有一点不同，就是 @media 指令可以嵌套在 Sass 选择器中。有点类似于 JS 冒泡功能，它会冒泡到样式表的顶层。

@media指令的使用

示例：

1.xkd{
2    width: 300px;
3    height: 100px;
4    @media screen and (orientation: portrait) {
5      width: 500px;
6    }
7}

编译成 CSS 代码：

1.xkd {
2  width: 300px;
3  height: 100px;
4}
5@media screen and (orientation: portrait) {
6  .xkd {
7    width: 500px;
8  }
9}

orientation 用于定义输出设备中的页面可见区域高度是否大于或等于宽度，可选值有两个，portrait 表示指定输出设备中的页面可见区域高度大于或等于宽度，除了 portrait 值情况外，都为 landscape。

@media 支持嵌套

示例：

例如我们在一个 @media 中嵌套另一个 @media：

1@media screen {
2    .xkd {
3      @media (orientation: landscape) {
4        color: #ccc;
5      }
6    }
7}

编译成 CSS 代码：

1@media screen and (orientation: landscape) {
2  .xkd {
3    color: #ccc;
4  }
5}