Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿意看到的一点。

  选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法,Sass 的嵌套分为三种:

  • 选择器嵌套
  • 属性嵌套
  • 伪类嵌套  

  1、选择器嵌套

  假设我们有一段这样的结构:

  <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;
      }
  }
  }   2、属性嵌套
  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;
}
}

  3、伪类嵌套

  其实伪类嵌套和属性嵌套非常类似,只不过他需要借助`&`符号一起配合使用。我们就拿经典的“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嵌套的更多相关文章

  1. [Sass]嵌套

    [Sass]嵌套-选择器嵌套 Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿 ...

  2. sass嵌套风格

    1.嵌套输出方式 nested Sass 提供了一种嵌套显示 CSS 文件的方式.例如 nav { ul { margin:; padding:; list-style: none; } li { d ...

  3. [Sass]不同样式风格的输出方法

    [Sass]不同样式风格的输出方法 众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写.在 Sass 中编译出来的样式风格也可以按不同的样式 ...

  4. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  5. Sass的学习

    第一章:Sass简介 一. 什么是CSS预处理器 定义:CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用 ...

  6. Sass&Compass学习笔记(一)

    1.sass中可以使用变量 变量名以$符号开头,可包含所有可用作CSS类名的字符,包括下划线和中划线. 可见,中划线也是可以作为命名的字符,这是与很多其他语言的不同之处.变量的使用实例: $compa ...

  7. CSS预编译器:Sass(入门),更快的前端开发

    SASs是由美国注册会计师协会(AICPA)下属审计准则委员会(ASB)发布,是为了便于注册会计师执行和落实一般公认审计准则(GAAS). Sass 扩展了 CSS3,增加了规则.变量.混入.选择器. ...

  8. sass基本用法

        什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常 ...

  9. Sass学习第一天

    Sass学习 网站学习地址: Sass中文网:https://www.sass.hk/docs/#t7-3 Airen的博客:https://www.w3cplus.com/preprocessor/ ...

随机推荐

  1. Spring之DAO一

    前面博客把bean.aop简单了解了一下,今天主要是了解Spring中DAO层,如果使用传统的JDBC时需要创建连接.打开.执行sql.关闭连接这一系列的步骤,Spring框架对JDBC进行了封装,我 ...

  2. LAMP第二部分apache配置

    课程大纲:1. 下载discuz! mkdir /data/wwwcd /data/wwwwget  http://download.comsenz.com/DiscuzX/3.2/Discuz_X3 ...

  3. 高级开发层面,针对Hibernate方面面试题的总结(对其它ORM也适用)

    虽然目前mytabis用得比较多,但Hibernate相对比较容易上手,而且也有不少公司在用,所以本文就用这个举例,事实上,本文给出的面试建议也适用于各种ORM.本文摘自java web轻量级开发面试 ...

  4. js获取手机屏幕宽度、高度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  5. 访问vm中centos的web站点

    vm网络连接设置成NAT 需要把centos设置成静态IP 再不行,记得把centos的防火墙先关闭

  6. Kafka的基本概念与安装指南(单机+集群同步)

    最近在搞spark streaming,很自然的前端对接的就是kafka.不过在kafka的使用中还是遇到一些问题,比如mirrormaker莫名其妙的丢失数据[原因稍后再说],消费数据offset错 ...

  7. Layout 不可思议(一)—— CSS 实现自适应的正方形卡片

    最近被一个布局问题给难住了,枉我一向自称掌握最好的前端技能是 CSS,写完博客就得敷脸去 需求是实现一个自适应的正方形卡片,效果如下: 顺便(开个坑)写个系列,总结那些设计精妙的布局结构 本次页面的 ...

  8. 解决ios手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  9. Markdown 常用语法

    1.标题 # 一级标题 ## 二级标题 ### 三级标题 2.字体 *斜体* **粗体** ~~删除线~~<u>下划线</u> 3.引用 > 引用文字 4.无序列表 - ...

  10. 前端js之JavaScript

    知识预览 一小知识 二 JavaScript的基础 BOM对象 DOM对象 实例练习 js拓展 小知识 核心(ECMAScript) 文档对象模型(DOM) Document object model ...