关于sass:Sass-media指令

43次阅读

共计 585 个字符,预计需要花费 2 分钟才能阅读完成。

本节咱们学习 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;}
}

正文完
 0