@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。来看一个简单的示例:

.a {
color: red; .b {
color: orange; .c {
color: yellow; @at-root .d {
color: green;
}
}
}
}

编译出来的CSS

.a {
color: red;
} .a .b {
color: orange;
} .a .b .c {
color: yellow;
} .d {
color: green;
}

Sass:@at-root的更多相关文章

  1. Zabbix监控Tomcat案例

    今天在这里,我们来聊一聊JMX监控方式, JMX(java管理扩展程序)是java平台上为应用程序,设备,系统等植入管理功能的框架,JMX可以跨越一系列不同的系统平台,更加灵活的服务管理应用: 在za ...

  2. Ext Js 6+ 动态切换皮肤

    在这里以ext js 6.2.1版本为例(注:需要安装Sencha Cmd,以及下载对应的sdk) 1.创建空白项目 在命令行中输入sencha -sdk D:\Code\ext-6.2.1 gene ...

  3. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  4. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  5. gulp + webpack + sass 学习

    笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...

  6. CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  7. less和sass的介绍和差异

    ● 混入(Mixins)——class中的class: ● 参数混入——可以传递参数的class,就像函数一样: ● 嵌套规则——Class中嵌套class,从而减少重复的代码: ● 运算——CSS中 ...

  8. LESS介绍及其与Sass的差异

    自从一个月前我偶然发现LESS之后我就开始坚定的使用它了.CSS本身对我来说从来不是问题,但是我很好奇使用变量来沿着一个调色盘为我的网站或模板创建一些东西的想法.拥有一个提供固定数量选项可选的色盘可以 ...

  9. LESS与SASS的伯与仲

    工作中用到了Bootstrap,涉及到了LESS,对其做了一个简单的了解,CSS的预处理器使用最广泛的就是LESS和Sass,都是努力把CSS武装成为开发语言,让它从简单的描述性语言过渡到具有程序式特 ...

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

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

随机推荐

  1. Oracle And子句

    Oracle And子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,将学习如何使用Oracle AND运算符来组合两个或更多的布尔表达式. ...

  2. Oracle JET(三)Oracle JET 响应布局

    Oracle JET 提供了一系列的 CSS 样式以直接使用. Oracle JET CSS样式链接:http://docs.oracle.com/middleware/jet310/jet/refe ...

  3. Extending Widgets with the Widget Factory

    https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/ 实例 https://github.com/tkvw/jQue ...

  4. jsonify返回中文乱码的问题

    参考博客: 解决flask中文乱码的问题 返回内容如图: 实际填写的内容: 从网上找答案,结果很多都是说配置app.config,如下: app.config['JSON_AS_ASCII'] 但我试 ...

  5. 【SQL SERVER】 搭建AlwaysON高可用组

    项目需要保障数据的高可用,于是可选的方案无非是Oracle集群. 传统的主从+心跳切换访问点以及SQL Server AlwaysOn这类方案.(//经验不多,了解和实践过的方案就这类,轻拍) Ora ...

  6. KETTLE——(三)数据输出

    数据输出和数据输入基本差不多,KETTLE本身支持的数据输出方式也特别多,还是以数据库输出为例. ​ 打开表输出的界面,简单介绍一下其功能: ​ 就这个界面,如果不勾选[指定数据库字段],KETTLE ...

  7. Map m=new HashMap()

    Map<String,String> m=new HashMap<String,String>() 等于 HashMap<String,String> hashMa ...

  8. oracle--ORA常见报错

    常见错误地址 http://ora-12xyz.com/error/ora-01911 ORA-01034和ORA-27101的解决办法 出现ORA-01034和ORA-27101的原因是多方面的:主 ...

  9. Python基础-1 python由来 Python安装入门 注释 pyc文件 python变量 获取用户输入 流程控制if while

    1.Python由来 Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚 ...

  10. python基础-6 正则表达式

    一 python正则简介 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现. 正则表达式模式被编译成一系列的字 ...