一、首先理解sass的嵌套中 &表示是什么?

&表示整个选择器,而不单个class属性值或id属性值或tagName。例如下面一段代码:

.a {
.b {
& {
color: #fff;
}
}
}

&这里表示

.a .b

而不能够理解&表示 “.b”

----------------------------------------------------------------------

二、@at-root的理解

@at-root 表示在选择器嵌套的最外层,如果@at-root到第一个 {} 之间没有人选择器,是会报错的, 所以常常和&配合用。  

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

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

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

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

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

  3. gulp + webpack + sass 学习

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

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

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

  5. less和sass的介绍和差异

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

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

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

  7. LESS与SASS的伯与仲

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

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

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

  9. Sass介绍及入门教程

    Sass是什么? Sass是"Syntactically Awesome StyleSheets"的简称.那么他是什么?其实没有必要太过于纠结,只要知道他是“CSS预处理器”中的一 ...

  10. sass或scss入门

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

随机推荐

  1. 使用Postfix和Dovecot收发电子邮件

    邮件应用协议包括: 简单邮件传输协议(SMTP),用来发送或中转发出的电子邮件,占用tcp 25端口. 第三版邮局协议(POP3),用于将服务器上把邮件存储到本地主机,占用tcp 110端口. 第四版 ...

  2. Ubuntu下安装MySQL及简单操作

    Ubuntu上安装MySQL非常简单只需要几条命令就可以完成. 1. sudo apt-get install mysql-server 2. apt-get isntall mysql-client ...

  3. 新唐的开发环境的搭建,驱动以及BSP

    https://www.keil.com/demo/eval/arm.htm#DOWNLOAD1,MDK-ARM的IDE集成开发环境:mdk512.exehttp://www.keil.com/fid ...

  4. 《shiro框架》

    20170929 shiro授权流程学习 shiro-filter执行流程 CacheManager(shiro缓存管理) JEESITE登录流程简单梳理 shiro与springMVC整合 shir ...

  5. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  6. 【转】C/C++函数调用过程分析

    转自:here 这里以一个简单的C语言代码为例,来分析函数调用过程 代码: #include <stdio.h> int func(int param1 ,int param2,int p ...

  7. 蓝凌OA常用表整理

    SELECT * FROM V_FI_ORG_EMP  --用户表视图(关联单位)SELECT * FROM FI_ORG_EMP  --用户表 SELECT * FROM FI_ORG_INFO   ...

  8. 原生js(二)

    js的同步.异步和延迟 1.默认情况下,js是同步和阻塞DOM解析的.在解析DOM的过程中,当遇到script时,会暂停DOM解析,开始请求script并执行js,执行完成之后再接着解析DOM树. 2 ...

  9. spring整合websocket通信

    1. maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  10. 题目1040:Prime Number(第k个素数)

    题目链接:http://ac.jobdu.com/problem.php?pid=1040 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...