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

心已赠人 2023-09-29 16:44 7阅读 0赞

原文网址：[Scss--@media--使用/实例\_IT利刃出鞘的博客-CSDN博客][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;
      }
    }

[Scss--_media--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125789911

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 ElementUI--使用（实例）

原文网址：[ElementUI--使用（实例）\_IT利刃出鞘的博客-CSDN博客][ElementUI--_IT_-CSDN] 其他网址 [44、前端基础-Vue-整

Love The Way You Lie/ 2023年01月23日 14:58/ 0 赞/ 202 阅读

相关 thymeleaf--使用/实例

原文网址：[thymeleaf--使用/实例\_IT利刃出鞘的博客-CSDN博客\_thymeleaf案例][thymeleaf--_IT_-CSDN_thymeleaf]

叁歲伎倆/ 2022年11月26日 07:42/ 0 赞/ 144 阅读

相关 Adapter使用实例

第一个实例 1.activity\_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLa

ゞ浴缸里的玫瑰/ 2022年09月25日 13:24/ 0 赞/ 192 阅读

相关 Lucene使用实例

Lucene全文检索大体分两个部分：索引创建（Indexing）和搜索索引（Search） 1. 索引过程 1) 有一系列被索引文件（此处所指即文本数据） 2) 被索

青旅半醒/ 2022年08月05日 04:17/ 0 赞/ 183 阅读

相关 Okhttp 使用实例

一个实际使用Okhttp的例子，弄明白了应该是可以直接用到实际应用中去的。我也是从一个用到的项目中摘出来的，保证了同一时刻只有一个http的请求。 [代码下载

r囧r小猫/ 2022年08月04日 05:18/ 0 赞/ 205 阅读

相关 httpclient使用实例

一、HttpClient简介 HTTP 协议可能是现在 Internet 上使用得最多、最重要的协议了，越来越多的 Java 应用程序需要直接通过 HTTP 协议

柔情只为你懂/ 2022年06月05日 03:19/ 0 赞/ 229 阅读

相关 OkHttp使用实例

OkHttp使用实例依赖 OkHttp包 compile 'com.squareup.okhttp3:okhttp:3.6.0'

傷城~/ 2022年05月26日 03:18/ 0 赞/ 262 阅读

相关 jsoncpp使用实例

\JSON文件编辑一个json文件，里面包含了对象以及数组等信息，文件内容如下： { "ip" : "1.2.3.4", "port

「爱情、让人受尽委屈。」/ 2022年05月13日 23:23/ 0 赞/ 211 阅读

相关 ContextMenu使用实例

Android除了可以通过菜单键弹出OptionsMenu外，还可以长按某个控件来弹出ContextMenu。比如EditeText就可以通过长

分手后的思念是犯贱/ 2022年04月23日 10:40/ 0 赞/ 257 阅读

相关 fastJson使用实例

1.fastjson坐标  <depen...

你的名字/ 2020年11月20日 18:04/ 0 赞/ 855 阅读