sass导入sass

The greatest challenge for most developers to learning Sass isn’t the concept of preprocessors, or the language itself, but the hoops that must be jumped through to get it up and running. Those comfortable with the command line can get things going fairly easily, and tools like CodeKit help immensely, but that still leaves many designer-developers who might otherwise become Sass aficionados intimidated by change, wary of paying for a new tool, or simply overwhelmed at the prospect of changing their entire workflow.

对于大多数开发人员而言，学习Sass的最大挑战不是预处理器的概念或语言本身，而是必须跳过去才能使Sass投入运行的障碍。 那些熟悉命令行的人可以很轻松地进行操作，而CodeKit之类的工具可以提供极大的帮助，但这仍然使许多设计人员-开发人员可能因更改而被Sass迷住，对购买新工具不屑一顾 ，或者只是不知所措改变他们整个工作流程的前景。

For those interested in learning Sass, I’d suggest taking a route that entirely avoids any up-front investment, has no long-term commitment, and demands very little time: CodePen. That way, you can start coding Sass in just three simple steps:

对于那些对学习Sass感兴趣的人，我建议您采取一条完全避免任何前期投资，没有长期承诺并且需要很少时间的方法： CodePen 。 这样，您只需三个简单的步骤即可开始对Sass进行编码：

1. Go to CodePen.io

   转到CodePen.io

2. Click on New Pen in the top left

   点击左上角的新笔

3. On the screen that appears, click on the gear icon next to CSS and choose Sass (.scss) in the new window. Click again on the same icon (or anywhere else on the screen) to close the window.

   在出现的屏幕上，单击CSS旁边的齿轮图标，然后在新窗口中选择Sass(.scss) 。 再次单击相同的图标(或屏幕上的其他任何位置)以关闭窗口。

That’s it: you’re now ready to start coding with Sass.

就是这样：您现在准备开始使用Sass进行编码。

轻而易举 (Easy Does It)

The first thing to realize is that, as a preprocessor, Sass supports everything that’s possible in CSS. In fact, you could write only vanilla CSS in a Sass file and everything would come out perfectly okay. Let’s prove that: type the following into the CodePen CSS panel:

首先要意识到的是，作为预处理器， Sass支持CSS中可能的一切 。 实际上，您只能在Sass文件中编写原始CSS，然后一切都会好起来的。 让我们证明一下：在CodePen CSS面板中键入以下内容：

body { background: goldenrod; }

You should see the preview pane light up with a new background: no new syntax required. Bottom line: you only need ever take on the Sass that you’re willing to use. Don’t know how to accomplish something in Sass? That’s fine: do it in CSS, right in the same stylesheet. You don’t need to learn an entire syntax all at once.

您应该看到预览窗格以新的背景亮起：不需要新的语法。 底线： 您只需要使用您愿意使用的Sass。 不知道如何在Sass中完成某事？ 很好：在CSS中，在同一样式表中进行操作。 您无需一次学习全部语法。

In this article, we’ll start by using just one standout Sass feature.

在本文中，我们将仅使用一个出色的Sass功能。

亮线：颜色和变量 (Bright Lines: Colors & Variables)

As a web development project grows, things get forgotten. Sometimes you can avoid having to dredge up the past by using CSS inheritance; having a strong, authoritative site style guide also helps. But sometimes there’s no way to avoid the question of “what was that color again?” And we all know the results: redundant declarations scattered throughout the stylesheet, or, even worse, best guesses at the color.

随着Web开发项目的发展，事情被遗忘了。 有时您可以避免通过使用CSS继承来疏通过去； 拥有强大而权威的网站样式指南也有帮助。 但是有时没有办法避免出现“这种颜色又是什么？”的问题。 我们都知道结果：多余的声明散布在样式表中，或者甚至更糟的是猜测颜色。

If preprocessors had to justify their existence on one sole feature, it would be variables. CSS variables are coming to the standard W3C specification, but it will be years before they can be used in production. With a CSS preprocessor, you can use variables now, the Sass way.

如果预处理器必须在一个唯一的特征上证明它们的存在，那将是变量。 CSS变量已成为标准的W3C规范 ，但要在生产中使用还需要很多年。 使用CSS预处理器，您现在可以以Sass方式使用变量。

We’ll need some content on the page to see this effect. Click in the HTML tab and type the following:

我们需要页面上的一些内容才能看到此效果。 单击HTML选项卡，然后键入以下内容：

<h1>Burdensome Burliness</h1>

Then at the top of the CodePen CSS window, type the following:

然后在CodePen CSS窗口的顶部，键入以下内容：

$primtext: #333;

And adjust the CSS immediately below it to:

并将其下方CSS调整为：

body { background: goldenrod; color: $primtext; }

You’ll see that the text is dark grey. Adjust the value of the variable, and the color of the text will change accordingly. This will remain true no matter how often you reference the $primtext variable throughout your code. Centralizing colors – or any other value – into Sass variables makes on-the-fly design changes very easy.

您会看到文本为深灰色。 调整变量的值，文本的颜色将相应改变。 无论您在代码中$primtext引用一次$primtext变量，这都是正确的。 将颜色(或任何其他值)集中到Sass变量中，可以使动态设计更改变得非常容易。

使用您所拥有的 (Using What You’ve Got)

That’s great in theory, but can we actually use what we’ve made? The answer is yes: CodePen is great for prototyping, and exporting our work will allow us to see the typical structure of a Sass project. To do so, click on the Save button, then Share. In the window that appears, choose Export .zip. Download and uncompress the .zip file; the result will look something like the screenshot below:

从理论上讲这很棒，但是我们可以实际使用我们所做的吗？ 答案是肯定的：CodePen非常适合制作原型，导出我们的工作将使我们能够看到Sass项目的典型结构。 为此，请点击保存按钮，然后点击共享 。 在出现的窗口中，选择Export .zip 。 下载并解压缩.zip文件； 结果将类似于以下屏幕截图：

You can see that the .scss file is in a folder; it may even be associated with an editor you already own. The final CSS stylesheet is also in a folder, which may be new to you: because the CSS is generated from any changes to the Sass file, a folder structure usually works best to contain it. The index page is linked to this CSS file, just like normal.

您会看到.scss文件在文件夹中； 它甚至可能与您已经拥有的编辑器相关联。 最终CSS样式表也位于一个文件夹中，这可能是您不熟悉的：因为CSS是通过对Sass文件的任何更改生成的，所以通常最好使用文件夹结构来包含它。 索引页面链接到此CSS文件，就像正常情况一样。

The result is the typical structure of a simple Sass-driven project, with the final “build” of the site stylesheet contained in a single folder.

结果就是一个简单的由Sass驱动的项目的典型结构，最终，网站样式表的“构建”包含在一个文件夹中。

That’s the very basics of using Sass. While I’ll have a lot more to say about colors and variables, we’ll turn to looking at another killer Sass feature in the next article.

这是使用Sass的基本知识。 虽然我将对颜色和变量有更多的话要说，但我们将在下一篇文章中介绍另一个杀手S的Sass功能。

翻译自: https://thenewcode.com/978/Learning-Sass-with-CodePen-Part-One

sass导入sass