Sass对CSS的扩展-嵌套规则,引用父选择器,属性嵌套,占位符选择器

完整的Sass中文文档翻译完成:https://www.html.cn/doc/sass/

翻译自sass官方文档:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#css_extensions

嵌套规则 (Nested Rules)

Sass 允许将一个 CSS 样式嵌套进另一个样式中,内层样式仅适用于外层样式的选择器范围内(注:可以理解为层级选择器),例如:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译为:

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

这有助于避免父选择器重复,相对于复杂的CSS布局中多层嵌套的选择器 要简单得多。 例如:

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

编译为:

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

引用父选择器:& (Referencing Parent Selectors: &) {#parent-selector}

有些时候需要直接使用嵌套外层的父选择器,这个就很有用了,例如,你可能喜欢给选择器指定 hover样式,或者当body元素具有某个样式时,在这些情况下,你可以 & 字符来明确地表示插入指定父选择器。 例如:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译为:

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

&将替换为呈现在CSS文件中的父选择器。这意味着,如果你有一个多层嵌套的规则,父选择器将在被&替换之前完全分解。 例如:

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译为:

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

& 必须出现在的选择器的开头位置(注:也就是作为选择器的第一个字符),但可以跟随后缀,将被添加到父选择的后面。 例如:

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为:

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

父选择器 & 被作为一个后缀的时候,Sass 将抛出一个错误。

嵌套属性 (Nested Properties)

CSS中有一些属性遵循相同的“命名空间”;比如,font-family, font-size, 和 font-weight都在font命名空间中。在CSS中,如果你想在同一个命名空间中设置一串属性,你必须每次都输出来。Sass为此提供了一个快捷方式:只需要输入一次命名空间,然后在其内部嵌套子属性。例如:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译为:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

命名空间也可以有自己的属性值。例如:

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

编译为:

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}

占位符选择器: %foo (Placeholder Selectors: %foo)

Sass 支持一种特殊类型的选择器,叫做”占位符选择器” (placeholder selector)。这些看起来像 class 和 id 选择器,除了#.%替换。他们需要在@extend 指令中使用;有关详细信息,请参阅@extend-Only Selectors

当他们单独使用的时候,即没有使用@extend的,使用占位符选择器的规则集将不会被渲染为CSS。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » Sass对CSS的扩展-嵌套规则,引用父选择器,属性嵌套,占位符选择器

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏