一、首先理解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. python中的数据类型与json的数据类型之间的转化

    什么是json: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...

  2. 【cs229-Lecture11】贝叶斯统计正则化

    本节知识点: 贝叶斯统计及规范化 在线学习 如何使用机器学习算法解决具体问题:设定诊断方法,迅速发现问题 贝叶斯统计及规范化(防止过拟合的方法) 就是要找更好的估计方法来减少过度拟合情况的发生. 回顾 ...

  3. Nginx反向代理腾讯云COS的一个坑

    版权声明:本文由黄希彤   原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/668639001484812620 来源:腾云 ...

  4. MySQL优化之SQL耗时瓶颈 SHOW profiles

    1.首先查看是否开启profiling功能 SHOW VARIABLES LIKE '%pro%'; 或者 SELECT @@profiling; 2.开启profiling SET profilin ...

  5. php底层变量分析

    <?php //数组引用 $arr = array('a','b','c','d'); $x = & $arr[1]; $tmp = $arr; $arr[1] = 'e'; echo ...

  6. 【咸鱼教程】Wing动画编辑器创建精美(一般-_-)开场动画

    游戏中会用着一些简单的动画,公司一般使用的dragonbones制作,导出二进制格式或者MC来使用.感觉一些简单动画直接使用动画编辑器更加简便些. 引擎版本:5.0.14wing版本:4.1.0 一 ...

  7. Memcached概念、作用、运行原理、特性、不足简单梳理(1)

    大家可能对memcached这种产品早有了解,或者已经应用在自己的网站中了,但是也有一些朋友从来都没有听说过或者使用过.这都没什么关系,本文旨在从各个角度综合的介绍这种产品,尽量深入浅出,如果能对您现 ...

  8. android极光杀掉程序收不到通知

    http://docs.jpush.io/guideline/faq/#android 第三方系统收不到推送的消息 由于第三方 ROM 的管理软件需要用户手动操作 小米[MIUI] 自启动管理:需要把 ...

  9. SDK Location not found Android Studio + Gradle

    extends: http://stackoverflow.com/questions/19272127/sdk-location-not-found-android-studio-gradle I ...

  10. jquery的$.each如何退出循环和退出本次循环

    https://api.jquery.com/jQuery.each/ We can break the $.each() loop at a particular iteration by maki ...