@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. All-one Matrices

    All-one Matrices 单调栈 最大全一矩阵计数 #include<bits/stdc++.h> #define maxn 3005 using namespace std; # ...

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

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

  3. 手机H5设计尺寸

    手机型号 导航栏和状态栏的高度 宽度 高度 可视区域高度 iPhone 4 (4, 4S) 64px 320px 480px 416px iPhone 5 (5c, 5s) 64px 320px 56 ...

  4. git使用,Git的skil-map,git配置http/https/socks5代理

    . 检出.克隆库: git clone git://git.openwrt.org/openwrt.git 2. git查看某个文件的修改历史 git log --pretty=oneline 文件名 ...

  5. 使用JS将图片转为Base64

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. mysql5.7多实例安装

    [root@vhost1]# cd /opt/source[root@vhost1]#ls mysql-5.7.21-linux-glibc2.12-x86_64.tar.gz[root@vhost1 ...

  7. 【洛谷P4445 【AHOI2018初中组】报名签到】

    题目描述 n 位同学(编号从1 到n)同时来到体育馆报名签到,领取准考证和参赛资料.为了有序报名,这n 位同学需要按编号次序(编号为1 的同学站在最前面)从前往后排成一条直线.然而每一位同学都不喜欢拥 ...

  8. ASP 解析json

    第一个方法是使用 JScript : <script language="jscript" runat="server"> Array.protot ...

  9. 二十六、python中json学习

    1.json序列介绍:提供4个关键字:dumps,dump,loads,load(与pickle用法完全相同) 语法:f.write(bytes(json.dumps(dict),encoding=& ...

  10. flex 垃圾回收

    原文在这里:Garbage Collection with Flex and Adobe Air 我终于有时间来整理在flexcamp上演讲的东西并写篇博客了.就在flexcamp前一个月,我几乎天天 ...