@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. 普通用户sudo权限

    需求: 1>创建一个saipu普通用户,不允许使用 rm 和 passwd root 和 sudo su - root 命令,其他命令均允许且 sudo 时不用输入密码 2>创建一个lwd ...

  2. HDU6621 K-th Closest Distance 第 k 小绝对值(主席树(统计范围的数有多少个)+ 二分 || 权值线段树+二分)

    题意:给一个数组,每次给 l ,r, p, k,问区间 [l, r] 的数与 p 作差的绝对值的第 k 小,这个绝对值是多少 分析:首先我们先分析单次查询怎么做: 题目给出的数据与多次查询已经在提示着 ...

  3. win7x64 串口程序无法运行,提示:component 'MSCOMM32.OCX' or one of its dependencies not correctlu registered。。。

    VB写的串口工具在win7 x64机器运行时遇到的问题, component 'MSCOMM32.OCX' or one of its dependencies not correctlu regis ...

  4. P3373线段树2

    #include<bits/stdc++.h> using namespace std; typedef long long ll; ; ll sum[N<<],lazy1[N ...

  5. 从 2017 OpenStack Days China 看国内云计算的发展现状

    目录 目录 China Runs On OpenStack 私有云正式迈入成熟阶段 混合云的前夜已经来临 China Runs On OpenStack OpenStack Days China 作为 ...

  6. Linux_文件系统&磁盘分区

    目录 目录 前言 文件系统 目录结构 File文件标识符 文件系统修复指令 两种磁盘格式 MBR格式 GPT格式 磁盘分区 查看分区 分区的类型 分区最小存储单元 查看当前分区的block的大小 GP ...

  7. Delphi XE2 之 FireMonkey 入门(1)

    Delphi XE2 的 FireMonkey 是跨平台的, 暂时只准备看看它在 Windows 下(我是 32 位 Win7)的应用情况. 很新的东西, 相信有了它, 以后的界面将会更灵活.漂亮, ...

  8. 【USACO18JAN】MooTube

    原文链接:https://blog.csdn.net/Patrickpwq/article/details/86656456 给定一棵n个点的树(n=1e5),有边权, 两点间距离定义为两点路径上的 ...

  9. python列表-增强的赋值操作

    增强赋值公式 (1) (2) (3) (4)

  10. 2019寒假作业三:PTA7-1抓老鼠啊~亏了还是赚了

    - 抓老鼠啊~亏了还是赚了? ( 分) 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C ...