Scss--@media--使用/实例

原文网址：Scss--@media--使用/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文介绍Scss的@media的用法。

概述

        Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

简单示例

Scss：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译后的CSS：

.sidebar {
  width: 300px;
}

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

嵌套

        @media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and。

Scss：

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

编译后的CSS：

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

动态的条件

@media 可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值。

Scss：

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

编译后的CSS：

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px;
  }
}