@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--创建TRIGGER实现跟踪用户登录信息

    ---创建日志表记录用户登录信息create  table user_log(  user_id         VARCHAR2(30),  session_id      NUMBER(10),  ...

  2. es之java删除文档操作

    删除文档操作 @Test public void deleteDocument(){ DeleteResponse response = client.prepareDelete("twit ...

  3. es之词库热更新解决方案

    1. 下载tomcat,作为远程词库的容器 , 需要在tomcat中配置词库 /webapp/ROOT这个路径下新建一个远程词库:​Vim hot.dicHot.dic中存放的就是实时热词 2.测试t ...

  4. HTML,CSS,JavaScript的思维导图

    一个思维导图是把抽象的事物具体化,以一个东西为思想核心内容,映射出一系列的组成及作用 影响的内容. HTML的思维导图 HTML是一种超文本标记语言.我认为要学习一门语言首先要知道其是什么,编辑工具是 ...

  5. MSSQL 如何导出db所有用户权限创建语句

    use dbgoDECLARE @Database varchar(255),@loginName varchar(255),@roleName varchar(255),@sql nvarchar( ...

  6. 002-es5.4.3结合spring-data-elasticsearch3.0.0.0使用

    一.使用前设置 1.elasticsearch开启 cmd下,进入安装目录 cd D:\developToool\elasticsearch-5.4.3 elasticsearch # 或者后台运行 ...

  7. Python uuid库中 几个uuid的区别

    在用到uuid库的时候,发现uuid有很多个,比较好奇,就查了一下他们的区别 uuid1()——基于时间戳 uuid2()——基于分布式计算环境DCE(Python中没有这个函数) uuid3()—— ...

  8. C# datatable 导出到Excel

    datatable导出到Excel /// <summary> /// 将DataTable导出为Excel文件(.xls) /// </summary> /// <pa ...

  9. selenium元素定位之css选择器

    在selenium元素定位时会用到css选择器选取元素,虽说xpath在定位元素时能解决大部分问题,但使用css选择器选取元素也是一种不错的选择. css相较与xpath选择元素优点如下: 表达式更加 ...

  10. 《好久不见》(Cover 陈奕迅)箫声远 洞箫

    Your browser does not support the audio element.