关于sass:Sass-media指令

本节咱们学习 Sass 中的 @media 指令，@media 指令用于设置款式规定到不同的媒体类型，这和 CSS 的应用规定差不多，然而它还有一点不同，就是 @media 指令能够嵌套在 Sass 选择器中。有点相似于 JS 冒泡性能，它会冒泡到样式表的顶层。

@media指令的应用

示例：

.xkd{    width: 300px;    height: 100px;    @media screen and (orientation: portrait) {      width: 500px;    }}

编译成 CSS 代码：

.xkd {  width: 300px;  height: 100px;}@media screen and (orientation: portrait) {  .xkd {    width: 500px;  }}

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

@media 反对嵌套

示例：

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

@media screen {    .xkd {      @media (orientation: landscape) {        color: #ccc;      }    }}

编译成 CSS 代码：

@media screen and (orientation: landscape) {  .xkd {    color: #ccc;  }}