sass嵌套_使用CodePen学习Sass，第二部分：嵌套

sass嵌套

If you’ve spent any time developing CSS you’ve probably written plenty of lines like the following:

如果您花了任何时间来开发CSS，那么您可能已经写了很多类似以下内容的代码行：

nav.tabbed-navigation { … }
nav.tabbed-navigation a { … }
nav.tabbed-navigation a span { … }

While this works, it creates lot of repeated lines in your stylesheet that are difficult to read,  with a strong dependence on CSS descendant selectors: if the class name on the <nav> element changes, you’ll have to rewrite all three CSS selectors in the example. With a preprocessor like Sass, you can take a different approach.

在此方法有效的同时，它会在样式表中创建许多难以理解的重复行，并且强烈依赖于CSS后代选择器 ：如果<nav>元素上的class名称发生更改，则必须重写所有三个CSS选择器在这个例子中。 使用像Sass这样的预处理器，您可以采用其他方法。

First, let’s move to CodePen and create a navigation bar very quickly, using the Emmet shortcuts I mentioned in the previous article. In the HTML tab, type:

首先，让我们转到CodePen，并使用我在上一篇文章中提到的Emmet快捷方式快速创建导航栏。 在“ HTML”选项卡中，键入：

nav.tabbed-navigation>(a[href="#"]*5>span{Click}+{ me})

Then immediately press TAB on your keyboard to expand the shortcut. (You can adjust the text inside each link later, if you wish)

然后立即按键盘上的TAB键以展开快捷方式。 (如果需要，您可以稍后在每个链接中调整文本)

Set the CSS in CodePen to accept .scss, as shown in the previous article, then type the following inside the associated pane:

设置在CodePenCSS接受.scss，如前面的文章中，然后键入相应的窗格中的以下内容：

.tabbed-navigation {
      background: #ccc;
      padding: 1rem;
      a {
            text-decoration: none;
            color: #333;
      }
}

The CSS this generates – currently invisible to us, but active in the CodePen preview pane – is:

生成CSS(目前对我们不可见，但在CodePen预览窗格中处于活动状态)为：

.tabbed-navigation {
background: #ccc;
      padding: 1rem;
}
.tabbed-navigation a {
		text-decoration: none;
      color: #333;
}

Let’s take this one step further. Modify the CSS you’ve written so far to:

让我们更进一步。 将到目前为止编写CSS修改为：

.tabbed-navigation {
      background: #ccc;
      padding: 1rem;
      a {
            text-decoration: none;
            color: #333;
            span {
            font-weight: bolder;
			}
      }
}

The resulting CSS (and its effect on the <nav> element) is the same as if you’d written each declaration seperately, but the Sass is much easier to write… and if the class name on the root element changes, there’s just one selector to rewrite, rather than three different copies.

生成CSS(及其对<nav>元素的影响)与您分别编写每个声明相同，但是Sass更加易于编写……并且如果根元素上的类名称发生更改，则只有一个选择器重写，而不是三个不同的副本。

使徘徊变得容易 (Making Hovers Easy)

Extending the idea of nesting further, we can use the ampersand symbol (&amp) to reference parent selectors. Change the Sass code to the following:

进一步扩展嵌套的思想，我们可以使用＆符号来引用父选择器。 将Sass代码更改为以下内容：

$linkcolor: #333;
$linkhighlight: #fff;
body {
  font-family: Avenir, Helvetica, sans-serif; 
}
.tabbed-navigation {
  background: #ccc;
 font-size: 0;
  a {
   text-decoration: none;
    font-size: 1rem;
    display: inline-block;
    padding: 1rem;
    transition: .3s background;
    color: $linkcolor;
    span {
      font-weight: bolder;
    }
    &:hover {
      background: $linkcolor;
      color: $linkhighlight;
    }
  }
}

You can see the result in the associated CodePen. By creating variables for the link text and background (discussed in the previous article) and adding a hover state underneath the links, we can easily control the appearence of the final UI while guaranteeing design consistency across our site.

您可以在关联的CodePen中查看结果。 通过为链接文本和背景创建变量(在上一篇文章中进行了讨论)，并在链接下方添加了悬停状态，我们可以轻松控制最终UI的外观，同时确保整个网站的设计一致性。

不要过于贪婪或深入 (Don’t Delve Too Greedily, Or Too Deep)

Obviously, this kind of Sass selection can be taken a lot deeper, essentially replicating the DOM in CSS. However at a certain point – broadly agreed by to be anything more than four levels deep – Sass nested selectors become too complex, too difficult to read, and too closely tied to the markup. Nesting makes sense in many situations, and can save significant amounts of coding time, but be careful not to use it in excess.

显然，可以更深入地了解这种Sass选择，实质上是在CSS中复制DOM 。 但是，在某个点上-广泛同意，深度不超过四个层次-Sass嵌套的选择器变得过于复杂，难以阅读且与标记紧密相关。 嵌套在许多情况下很有意义，可以节省大量的编码时间，但请注意不要过多使用它。

明智地使用CSS继承 (Use CSS Inheritance Wisely)

You can use CSS values like inherit and currentColor to enhance nesting further, making maintenance easier. For example, if you want the navigation bar links to be the same color as body text, you could write:

您可以使用inherit和currentColor类CSS值进一步增强嵌套，从而使维护更加容易。 例如，如果您希望导航栏链接与正文文本具有相同的颜色，则可以编写：

body {
      color: #333;
}
nav.tabbed-navigation {
      background: #ccc;
      padding: 1rem;
      a {
            text-decoration: none;
            color: currentColor;
            span {
            font-weight: bolder;
				}
      }
}

Naturally, these color choices could also be expressed as Sass variables.

当然，这些颜色选择也可以表示为Sass变量。

Next, I’ll look at one of the most useful features in Sass, one that makes modern modular, object-oriented CSS development easier and much more powerful: @extend

接下来，我将看一下Sass中最有用的功能之一，它使现代的模块化，面向对象CSS开发变得更轻松，更强大： @extend

翻译自: https://thenewcode.com/979/Learning-Sass-with-CodePen-Part-Two-Nesting

sass嵌套