快速学sass(五)--嵌套
2017-03-13 21:39
113 查看
选择器嵌套
Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法,Sass 的嵌套分为三种:
选择器嵌套
属性嵌套
伪类嵌套
假设我们有一段这样的结构:
<header> <nav> <a href=“##”>Home</a> <a href=“##”>About</a> <a href=“##”>Blog</a> </nav> <header>
想选中 header 中的 a 标签,在写 CSS 会这样写:
nav a { color:red; } header nav a { color:green; }
那么在 Sass 中,就可以使用选择器的嵌套来实现:
nav { a { color: red; header & { color:green; } } }
属性嵌套
Sass 中还提供属性嵌套,CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right,与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了:.box { border-top: 1px solid red; border-bottom: 1px solid green; }
在 Sass 中我们可以这样写:
.box { border: { top: 1px solid red; bottom: 1px solid green; } }
伪类嵌套
其实伪类嵌套和属性嵌套非常类似,只不过他需要借助&符号一起配合使用。我们就拿经典的“clearfix”为例吧:
.clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } }
编译出来的 CSS:
clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }
相关文章推荐
- sass 学习笔记(一):嵌套,变量,operation。。。基本就是翻译了一遍官网
- bootstrap-sass 快速开始
- 理解SASS的嵌套,@extend,%Placeholders和Mixins
- 使用one-jar-appgen快速生成jar文件嵌套的eclipse工程
- Sass学习笔记 -- 嵌套
- Sass 嵌套(选择器、伪类、属性)
- sass快速手册
- 使用sass时,如何快速安装ruby环境
- Sass&Compass快速入门总结
- Sass嵌套的使用
- hotcss.js如何利用sass自动生成css,快速让px转换成rem
- Sass快速入门
- HTML快速入门2——字形、字体和嵌套
- sass笔记之嵌套
- CSS预处理器:SASS快速入门
- Sass变量、嵌套
- 快速学sass(一)--简介
- 快速学sass(六)--混合宏
- sass嵌套CSS 规则;
- 使用 GMF 快速开发支持嵌套图元的编辑器