sass的@at-root
一、首先理解sass的嵌套中 &表示是什么?
&表示整个选择器,而不单个class属性值或id属性值或tagName。例如下面一段代码:
.a {
.b {
& {
color: #fff;
}
}
}
&这里表示
.a .b
而不能够理解&表示 “.b”
----------------------------------------------------------------------
二、@at-root的理解
@at-root 表示在选择器嵌套的最外层,如果@at-root到第一个 {} 之间没有人选择器,是会报错的, 所以常常和&配合用。


sass的@at-root的更多相关文章
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- gulp + webpack + sass 学习
笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...
- CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- less和sass的介绍和差异
● 混入(Mixins)——class中的class: ● 参数混入——可以传递参数的class,就像函数一样: ● 嵌套规则——Class中嵌套class,从而减少重复的代码: ● 运算——CSS中 ...
- LESS介绍及其与Sass的差异
自从一个月前我偶然发现LESS之后我就开始坚定的使用它了.CSS本身对我来说从来不是问题,但是我很好奇使用变量来沿着一个调色盘为我的网站或模板创建一些东西的想法.拥有一个提供固定数量选项可选的色盘可以 ...
- LESS与SASS的伯与仲
工作中用到了Bootstrap,涉及到了LESS,对其做了一个简单的了解,CSS的预处理器使用最广泛的就是LESS和Sass,都是努力把CSS武装成为开发语言,让它从简单的描述性语言过渡到具有程序式特 ...
- CSS预处理器Sass(Scss)、Less、Stylus
CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...
- Sass介绍及入门教程
Sass是什么? Sass是"Syntactically Awesome StyleSheets"的简称.那么他是什么?其实没有必要太过于纠结,只要知道他是“CSS预处理器”中的一 ...
- sass或scss入门
1.sass环境搭载: 安装ruby 安装sass 安装compass 配置webstorm 如果只是使用sass的话,就配置sass命名监听就好了 如图: sass目录如下: 如果配置了compas ...
随机推荐
- 利用DB实现简单去重处理
业务需要针对某文件进行判重操作,用Perl实现如下 #!/usr/bin/perl my %h; s/\s+$// and $h{$_}++ while <>; print "$ ...
- phpadmin试用
在Windows或者Linux下mysql安装后默认的密码为空,又当我们又安装了mysql的管理工具phpmyadmin后登陆时 出现“空密码登陆呗禁止(参见允许密码为空)”.不能登录成功 ...
- Memcached 命令行操作
telnet 用于连接 Memcached: [root@localhost ~]# telnet Trying 127.0.0.1... Connected to 127.0.0.1. Escape ...
- Redis 操作有序集合数据
Redis 操作有序集合数据: > zadd names "Tom" // zadd 用于往有序集合中添加元素,其中 1 在 Redis 中称为 score(分数),用来进行 ...
- 在RDLC报表中对纸张的设置
RDLC报表是存放成XML文件格式的,这一点你可以直接打开RDLC报表文件看一下,而且在使用时,通过ReportViewer来读取报表并与数据源进行合成,也就是说RDLC是定义了一个格式,那就不能通过 ...
- 【python3】 django2.0 加载css 、js 、img 等静态文件
python : 3.6.4 django : 2.0 1 文件目录 /var/www/mysite 2 nginx配置: server { listen ; #暴露给外部访问的端口 server_ ...
- 【大数据系列】hadoop核心组件-MapReduce
一.引入 hadoop的分布式计算框架(MapReduce是离线计算框架) 二.MapReduce设计理念 移动计算,而不是移动数据. Input HDFS先进行处理切成数据块(split) ma ...
- echarts - 树图实现四个层级
我相信很多人和我一样,制作echats图标时,都会先去demo官网找相同的或者近似的效果,然后再此基础上改进成我们想要的那个. 但是近期混迹某微信群时,我看到一个群友抛出问题说,echarts画树状图 ...
- vue案例 - 使用vue实现自定义多选与单选的答题功能
4月底立得flag,五月底插上小旗,结果拖到六月底七月初才来执行.说什么工作忙都是借口,就是睡的比猪早,起的比猪晚. 本来实现多选单选这个功能,vue组件中在表单方面提供了一个v-model指令,非常 ...
- Python Tkinter 学习成果:点歌软件music
笔者工作业余时间也没什么爱好,社交圈子也小,主要娱乐就是背着自己带电瓶的卖唱音响到住地附近找个人多的位置唱唱KtV. 硬件上点歌就用笔记本电脑,歌曲都是网上下载的mkv格式的含有两个音轨的视频.因此点 ...