@at-root指令可以使一个或多个规则被限定输出在文档的根层级上,而不是被嵌套在其父选择器下。

  下面就通过scss代码实例介绍一下它的作用:

  没有使用@at-root命令的默认情况。

.parent{
color:red;
.child {
width:200px;
height:50px;
}
}

  编译成css代码如下:

.parent {
color: red;
}
.parent .child {
width: 200px;
height: 50px;
}

  使用@at-root命令的scss代码

.parent{
color:red;
@at-root .child {
width:200px;
height:50px;
}
}

  编译后的css代码如下:

.parent {
color: red;
}
.child {
width: 200px;
height: 50px;
}

  由于使用@at-root命令,那么.child就不参与嵌套,直接跳出嵌套。

  代码在默认情况下@at-root并不会使指定的规则或则选择器跳出指令,比如@media或者@supports。

  scss实例如下:

@media print {
@at-root{
.foo {
color: green;
color: gray;
}
}
}

  编译后的css代码如下:

@media print {
.foo {
color: green;
color: gray;
}
}

  可以看出@at-root默认情况下并不能使规则或者选择器跳出指令。

  默认 @at-root 只会跳出选择器嵌套,而不能跳出 @media 或 @support,如果要跳出这两种,则需使用 @at-root(without: media),@at-root(without: support)。这个语法的关键词有

四个:all(表示所有), rule(表示常规),  media(表示 media),support(表示 support )。我们默认的 @at-root 其实就是 @at-root( without: rule )。

  (1)、@at-root(without: rule)

  rule 关键词只能跳出选择器嵌套,不能跳出 @media 和 @support

  (2)、@at-root(without: media)

  可以跳出 @media ,但是没有跳出父级选择器

  scss代码实例如下:

@media print {
.page {
  width: 800px;
  a {
  color: red;
  @at-root(without: media) {
    span { color: #00f }
  }
  }
}
}

  编译后的css代码如下:

@media print {
.page {
width: 800px;
}
.page a {
color: red;
}
}
.page a span {
color: #00f;
}

  由上可以看出 @at-root(without: media) 可以跳出 @media ,但是没有跳出父级选择器,如果我们想跳出 @media 和 父级嵌套,可以一次添加两个指令,两个指令用空格分隔,scss

代码实例如下:

@media print {
.page {
width: 800px;
a {
color: red;
@at-root(without: media rule) {
span { color: #00f }
}
}
}
}

  编译后的css代码如下:

@media print {
.page {
width: 800px;
}
.page a {
color: red;
}
} span {
color: #00f;
}
 

  (3)、@at-root(without: support)

  @at-root(without: support) 和 @at-root(without: media) 相似,只是跳出的是 @support。

  (4)、@at-root(without: all)

  @at-root(without: all) 是跳出所的指令和规则,如上面的代码里 @at-root(without: media rule) 我们可以换成 @at-root(without: all),效果是一样的。

scss-@at-root的更多相关文章

  1. sass或scss入门

    1.sass环境搭载: 安装ruby 安装sass 安装compass 配置webstorm 如果只是使用sass的话,就配置sass命名监听就好了 如图: sass目录如下: 如果配置了compas ...

  2. Webpack: 为Web开发而生的模块管理器[转]

    Webpack: 为Web开发而生的模块管理器 原文地址:http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/ 10 Se ...

  3. Laravel-mix 中文文档

    镜像地址 : https://segmentfault.com/a/1190000015049847原文地址: Laravel Mix Docs   概览   基本示例 larave-mix 是位于w ...

  4. webpack4配置学习(一)

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gr ...

  5. webapck学习笔记

    该笔记是博主学习webpack课程时做的笔记,里面加了一些自己的一些理解,也踩了一些坑,在笔记中基本上都更正过来了,分享给大家,如果发现什么问题,望告知,非常感谢. 1. 为什么要学webapck 为 ...

  6. 一种比css_scoped和css_module更优雅的避免css命名冲突小妙招

    css_scoped 与 css_module 我们知道,简单的class名称容易造成css命名重复,比如你定义一个class: <style> .main { float: left; ...

  7. CSS预处理器Sass(Scss)、Less、Stylus

    CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...

  8. webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)

    1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...

  9. 4-10 辅助方法controll_name,;SanitizeHelper; 伪元素和scss中的&, @Media; cache介绍。

    回顾知识点 1. 在application.html.erb中: <main class="<%= controller.controller_name%>"&g ...

  10. Sass带来的变革_sass, scss 教程_w3cplus - Google Chrome

    Sass带来的变革 作者:大漠 日期:2014-11-17 点击:5291 sass scss 接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上.同时也让自己喜欢上 ...

随机推荐

  1. Pycharm关闭后Python.exe还是在后台运行

    pycharm运行程序关闭后会弹出一个对话框: 一定要选择第一个,不然python.exe一直会在后台运行.

  2. 【智能算法】用模拟退火(SA, Simulated Annealing)算法解决旅行商问题 (TSP, Traveling Salesman Problem)

    喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 文章声明 此文章部分资料和代码整合自网上,来源太多已经无法查明出处,如侵犯您的权利,请联系我删除. 01 什么是旅行商问题(TS ...

  3. python Exception

    1.except:用来捕捉异常,如果没有捕捉到,则向上层exception传递 2.finally:用来保证其代码一定会执行,可以做收尾工作,比如关闭文件等等. 3.在with as 中, 4.try ...

  4. ubuntu 上安装支付宝安全插件不能运行问题

    1.在ubuntu的firefox浏览器中打开支付宝首页,不能登录,按照提示下载插件 aliedit.tar.gz 2.解压到某个文件夹下,有文件aliedit.sh, 运行 # sh aliedit ...

  5. zip与unzip

  6. Domoticz 接入苹果的 HomeKit 实现 Siri 控制

    前言 接上次的折腾,这次尝试将 Domoticz 接入到苹果的 HomeKit,也就是在 iPhone 的 Siri 中可以语音控制.参考官方文档 步骤 安装 nodejs curl -sL http ...

  7. JSONP原理及简单实现 可做简单插件使用

    JSONP实现跨域通信的解决方案. 在jquery中,我们可以通过$.ajax的dataType设置为jsonp来调用jsonp,但是jsonp和ajax的实现原理一个关系都木有.jsonp主要是通过 ...

  8. MAC终端下常用Git命令

    送给新手的简单命令操作.远程Git和local的同步实现流程: 1.把git上的代码clone到本地 $ git clone http:xxxx(地址,可以http也可以ssh) 2.clone到本地 ...

  9. Day45--js基本小结

    JavaScript基本总结 一:基本背景 01:注:ES6就是指ECMAScript 6.(2015 ECMAScript6 添加类和模块) ECMAScript和JavaScript的关系 199 ...

  10. CentOS7 编译安装 php7

    更新:2019-01-25 补充:CentOS 7.5 全新编译安装 PHP-7.3.1 ,补充内容接在原文之后 更新:2018-09-29 补充:新系统下编译安装PHP-7.2.5遇到的问题,补充内 ...