一、首先理解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. mybatis 之resultType="Map"

    Map map = new HashMap(); map.put("productTypeID", productTypeId); List<HashMap> prod ...

  2. RabbitMq 之简单队列

    简单队列类似于我们的生产者,消费者, 一个生产者,对应一个消费者. 直接上代码: package com.j1.rabbitmq.simple; import com.j1.rabbitmq.util ...

  3. HIGHGUI ERROR: V4L/V4L2: VIDIOC_S_CROP错误解决方法

    在树莓派上运行在windows上正确的程序,  报错: HIGHGUI ERROR: V4L/V4L2: VIDIOC_S_CROP OpenCV Error: Assertion failed (s ...

  4. 【大数据系列】HDFS文件权限和安全模式、安装

    HDFS文件权限 1.与linux文件权限类型 r:read w:write x:execute权限x对于文件忽略,对于文件夹表示是否允许访问其内容 2.如果linux系统用户sanglp使用hado ...

  5. 重载i++,++i操作符

    #include <iostream> using namespace std; class Time { public: Time(){min=;sec=;} Time(int m,in ...

  6. python函数定义语法总结

    见下面代码及注释: def calc(value): sum=0 for m in value: sum=sum+m return sum data=[1,2,3,4,5,6,7,8,9,10] pr ...

  7. win7 查看当前java路径

    C:\Users\zh>where javaC:\Windows\System32\java.exeD:\TOOL\jdk1.8.0_91\bin\java.exeD:\TOOL\jdk1.8. ...

  8. LeetCode 81 Search in Rotated Sorted Array II(循环有序数组中的查找问题)

    题目链接:https://leetcode.com/problems/search-in-rotated-sorted-array-ii/#/description   姊妹篇:http://www. ...

  9. testmath

    $\Huge ans = \frac{ \sum\limits_{i=1}^{m}{ (x_i - \bar{x})^2 } }{m} \cdot m^2 \\$

  10. Linux应急处理操作手册

    基础准备--命令防篡改与命令记录 很多黑客入侵到操作系统后,会做两个常见的操作unset history和替换命令文件(或者对应的链接库文件),针对这两点要做好记录shelllog并且检查链接库类文件 ...