一、首先理解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. Selenium 前进和后退

    我们平常使用浏览器时都有前进和后退功能, Selenium 也可以完成这个操作,它使用 back() 方法后退,使用 forward() 方法前进 from selenium import webdr ...

  2. [Ubuntu] arp-scan - 扫描网络设备

    使用arp-scan扫描所有网络设备信息. 1. 安装arp-scan ifantastic@ubuntu:~$ sudo apt-get install arp-scan 2. 扫描网络所有设备 i ...

  3. Java API方式调用Kafka各种协议

    众所周知,Kafka自己实现了一套二进制协议(binary protocol)用于各种功能的实现,比如发送消息,获取消息,提交位移以及创建topic等.具体协议规范参见:Kafka协议  这套协议的具 ...

  4. STL——序列式容器

    一.容器概述与分类 1. STL容器即是将运用最广的一些数据结构实现出来.常用的数据结构有array, list, tree, stack, queue, hash table, set, map…… ...

  5. Struts在Web.xml中的配置及Struts1和Struts2的区别

    (1)配置Struts的ActionServlet     <servlet>元素来声明ActionServlet    <servlet-name>元素:用来定义Servle ...

  6. Qt——文件对话框

    教程:https://www.devbean.net/2012/09/qt-study-road-2-file-dialog/ 代码如下: //mainwindow.h #ifndef MAINWIN ...

  7. PowerDesigner快捷键【转】

    一般快捷键 快捷键 说明 F4 打开检查模型窗口,检查模型 F5 如果图窗口内的图改变过大小,恢复为原有大小即正常大小 F6 放大图窗口内的图 F7 缩小图窗口内的图 F8 在图窗口内中查看全部图内容 ...

  8. Material Design系列第八篇——Creating Lists and Cards

    Creating Lists and Cards //创建列表和卡片 To create complex lists and cards with material design styles in ...

  9. VScode首选项

    首选项相关的设置: // 将设置放入此文件中以覆盖默认设置 { "workbench.iconTheme": "vscode-icons", "wor ...

  10. LeetCode 79 Word Search(单词查找)

    题目链接:https://leetcode.com/problems/word-search/#/description 给出一个二维字符表,并给出一个String类型的单词,查找该单词是否出现在该二 ...