使用CodePen学习Sass，第六部分：局部函数和@import

The inevitable rule of web development is that stylesheets get longer and harder to manage as a site grows. CSS has a single, traditional solution to this: @import, used to reference outside files from a stylesheet. You’ll most likely have seen @import used to embed a web font, but the same method can be employed to draw any valid CSS resource into a stylesheet.

Web开发的必然规则是，随着站点的增长，样式表变得越来越长，越来越难以管理。 CSS有一个传统的解决方案： @import ，用于引用样式表中的外部文件。 您很可能已经看到@import用于嵌入Web字体，但是可以使用相同的方法将任何有效CSS资源绘制到样式表中。

However, standard @import has two major disadvantages in CSS:

但是，标准@import在CSS中有两个主要缺点：

1. @import is only valid at the start of a stylesheet (i.e. directly after the @charset), and can’t be used later.

   @import仅在样式表的开头(即，直接在@charset )有效，以后不能使用。

2. More importantly, traditional @import always remains a link to an external resource. This means that the stylesheet will be forced to request and download separate files, slowing the site’s time-to-glass through latency and stacked requests.

   更重要的是， 传统@import始终始终是到外部资源的链接 。 这意味着样式表将被迫请求和下载单独的文件，从而通过延迟​​和堆积的请求而减慢了网站的发布时间。

Thankfully, Sass provides a better solution.

幸运的是，Sass提供了更好的解决方案。

萨斯@import (Sass @import)

Sass imports use partials: fragments of CSS. A simple example would be a minimal CSS reset:

Sass导入使用partials ：CSS片段。 一个简单的例子就是最小CSS重置：

html {
	box-sizing: border-box;
}
body {
	margin: 0;
	box-sizing: inherit;
}
figcaption, ul, ol, dl {
	margin: 0;
	padding: 0;
}

This fragment can be as large or as small as you like: what matters is the filename you give it, and where that file is saved. There are three conditions for naming Sass partial files:

该片段的大小可以任意选择：重要的是提供的文件名以及该文件的保存位置。 命名Sass部分文件有三个条件：

1. The filename must start with an underscore.
   文件名必须以下划线开头。

2. The filename should have an extension of .scss, even if it only uses plain CSS.

   即使仅使用纯CSS，文件名的扩展名也应为.scss 。

3. The file must be saved beside your root styleseet. (It’s possible to place partials in subfolders, but I will leave that for an advanced article).
   该文件必须保存在您的根styleseet旁边。 (可以将部分内容放在子文件夹中，但我将其留给高级文章使用)。

For example, let’s imagine we save the code we’ve written so far as a file named _reset.scss. We’ll save it in the same location as our “base”, Sass-infused stylesheet, styles.scss. To import _reset.scss into styles.scss, turn to the latter file and add this at the top of the document:

例如，假设我们将到目前为止编写的代码保存为名为_reset.scss的文件。 我们将其保存在与“ Sass”注入样式表“ styles.scss ”相同的位置。 要将_reset.scss导入styles.scss ，请转到后者，并将其添加到文档顶部：

@import 'reset';
// the rest of your stylesheet goes here

Note that we don’t add the underscore or the .scss extension for _reset.scss when referencing it via Sass @import: given the root name of the file, Sass is smart enough to know what we’re talking about.

请注意，我们不加下划线或.scss通过引用萨斯时延长_reset.scss @import ：给定的文件的根名称，萨斯是足够聪明，知道我们正在谈论。

Sass compiles the base stylesheet with any @import files: the result is a single stylesheet that directly incorporates the code of all the partials inside the main CSS file, eliminating any dependence or slowdown when the stylesheet loads. This means that you can develop your CSS in modules, adding them to the central stylesheet where you need them and keeping your code clean and organized.

Sass使用任何@import文件编译基本样式表：结果是一个样式表，该样式表直接将主CSS文件中所有部分的代码合并到一起 ，从而消除了样式表加载时的依赖性或速度降低。 这意味着您可以在模块中开发CSS，将它们添加到需要它们的中央样式表中，并使代码保持整洁有序。

随处导入 (Import Everywhere)

One of the nice features of Sass-powered @import is that we can use it anywhere in our main stylesheet: at the start, at the end, or anywhere in between. We can also attach conditions to an @import. For instance, if we’ve developed a site using mobile-first methodology, we might have a partial containing styles for browser viewports 720 pixels and wider. A simple version of that partial stylesheet might be the following:

由Sass支持的@import一个不错的功能之一是，我们可以在主样式表中的任何位置使用它：在开始，结尾或中间之间的任何位置。 我们还可以将条件附加到@import 。 例如，如果我们使用移动优先方法开发了一个网站，则可能包含部分包含720像素或更宽的浏览器视口的样式。 该部分样式表的简单版本如下：

body { margin: 1rem; }

I’ll call this file _720px.scss, and save it beside my main stylesheet. In that main stylesheet, I’ll import this partial and place an @media query around it:

我将此文件称为_720px.scss ，并将其保存在我的主样式表旁边。 在该主要样式表中，我将导入此部分，并在其周围放置一个@media查询：

@media all and (min-width: 720px) {
    @import '720px';
}

This will embed the styles of _720px.scss inside the condition of the media query. This can be further enhanced with mixins, a Sass feature I will talk about in a future article.

这会将_720px.scss样式嵌入媒体查询的条件中。 可以通过mixins进一步增强此功能，这是我在以后的文章中将谈到的Sass功能。

Sass导入CodePen (Sass Import In CodePen)

You may have noticed that, unlike the rest of the articles in this series, I haven’t directly addressed CodePen so far. This is due to the fact that @import explicitly references external files… and CodePen does not host files by default, only code. However, it does host images, partials, scripts and short videos with a Pro account, which you can currently try for free for 14 days. If you’re interested, I’ve left a simple CodePen @import example using my Pro account that you could use as a starting example.

您可能已经注意到，与本系列的其他文章不同，到目前为止，我还没有直接介绍CodePen。 这是由于@import显式引用了外部文件……并且CodePen默认不托管文件，而仅托管代码。 但是，它可以使用Pro帐户托管图像，部分图片，脚本和短视频，您目前可以免费试用14天 。 如果您有兴趣，我将使用我的Pro帐户留下一个简单的CodePen @import示例 ，您可以将其用作入门示例。

翻译自: https://thenewcode.com/984/Learning-Sass-with-CodePen-Part-Six-Partials-and-import