compass sass_用Sass和Compass设置基础

compass sass

一般而言，Sass是加速前端开发的一种好方法，我在每个项目中都使用它。 Sass（与所有其他预处理器一样）允许在称为mixins的嵌套样式，函数和预编写的代码中使用。 Foundation有几个不同的版本，目前我们已经介绍了最常见HTML / CSS变体，但现在让我们来谈谈基于Sass构建的版本。

Foundation背后的团队不仅使用Sass允许更友好和动态的样式，而且与HTML / CSS版本相比，他们在Sass版本中提供了更大的自定义。

Sass非常适合像我一样是设计师第一，编码员第二的人。 HTML和CSS很容易学习和完成工作，但是从那些简单的语言到jQuery和JavaScript却是一个很大的飞跃。 使用Sass可让您调动函数，变量和可重用代码的概念，这确实有助于向更复杂的语言过渡。

---

入门：OS X

我们将在这里进行潜水，并且需要使用终端/命令提示符进行操作，但不要拖延，因为它比看起来容易。 首先，打开Terminal（OS X）并粘贴以下内容：

sudo gem install zurb-foundation

处理可能需要一些时间，但应显示如下屏幕：

完成此步骤后，您实际上将在您的系统中添加了Foundation核心，从而使您可以随意重用它，而无需访问Foundation站点。 采用这种方法的妙处在于，您可以使用另一个简单的命令将该核心可重用框架更新为最新的公共构建或发行候选。 为此，只需将以下内容之一粘贴到终端中：

sudo gem update zurb-foundation

sudo gem install zurb-foundation --pre

最后一个设置步骤是安装Compass ，这将使我们能够创建Foundation的构建以用于我们的项目。 同样，这可能需要一些时间，请耐心等待。 粘贴以下内容：

sudo gem install compass

安装后，您应该具有如下所示的终端输出：

现在我们已经遍历了安装Ruby宝石并保持最新状态的曲折，让我们建立一个项目，以便我们可以开始分析使用Foundation进行开发的途径。

---

项目设置：OS X

每当您要开始一个新项目时，只需打开终端并键入“ cd”（更改目录），而无需输入语音标记，则需要输入路径，或为项目创建一个文件夹并将其拖入到终端。 但是，请确保“ cd”和您的路径之间有一个空格。 遵循以下命令，该命令将实际创建您的项目：

compass create YOUR-PROJECT-NAME -r zurb-foundation --using foundation

确保更改您的实际项目名称的“您的项目名称”文本，然后按回车键。 然后，您将看到许多信息行可供选择。 此选择决定了将Sass文件保存时将其转换为CSS文件，还是选择转换时将其手动转换为CSS文件。 我总是使用第二个选择，当我保存Sass文件时，它会自动创建CSS文件。 您应该会看到以下内容：

从中您可以看到发生了很多事情，并且您基于基金会的项目诞生了。 使用“ compass compile”或“ compass watch”方法选择了compile方法后，您可能希望获取可在图像底部看到的代码。 这将为您节省一些时间，因为它会添加输出样式表并进行规范化。

从这里开始，您可以开始使用Sass实际构建项目。

---

入门：Windows

如果您使用的是Windows，则仍可以使用Sass版本的Foundation，只需执行一些步骤即可。 首先，让我们去了解Ruby。 Ruby是使我们能够安装此基于Sass的Foundation版本的工具。 与OS X不同，Windows默认情况下未安装此程序，因此我们需要获取它 。

现在，您需要最新版本（在撰写本文时为2.0.0），并根据所使用的体系结构，为32位计算机选择标准，为64位计算机选择x64。 如果不确定哪个，只需在“我的电脑”上单击鼠标右键，然后单击“属性”进行查找。 如果失败，请使用32位。

下载后，运行安装。 除非您知道自己在做什么，否则请勿勾选/更改任何内容。 安装完成后，转到程序，然后是Ruby，然后单击“使用Ruby启动命令提示符”。 加载完成后，复制以下代码并粘贴到命令提示符中，您可以通过右键单击顶部栏上的“编辑”>“粘贴”来执行此操作。

gem install zurb-foundation

您会看到类似的东西：

您还可以使用通用的公共构建命令或发行候选命令来使Foundation保持最新状态：

gem update zurb-foundation

gem install zurb-foundation --pre

现在我们有了基本设置，让我们继续安装最后一块Compass。 和以前一样，我们可以使用以下命令安装Compass：

gem install compass

请耐心等待，这将导致如下所示的屏幕：

---

项目设置：Windows

要实际创建您的项目，您需要切换到“桌面”之类的目录并运行命令。 您可以通过键入“ cd”（不带语音标记），空格，路径来实现。 要添加路径本身，您可以输入一个，也可以将文件夹拖放到命令提示符中。

更改目录后，请运行此命令，并确保将您的实际项目名称更改为YOUR-PROJECT-NAME。

compass create YOUR-PROJECT-NAME -r zurb-foundation --using foundation

就是这样！ 在此之后，Windows和OS X之间没有任何区别。

---

有用的工具

如果您确实使用OS X，则有一个名为CodeKit的出色开发工具。 此应用程序会自动缩小JS，CSS，SCSS-并将SCSS转换为CSS，这意味着您可以终止终端并使用CodeKit。 它还为JS和SCSS（包括jQuery之类的库）提供了错误突出显示功能。

我知道你在想什么 “我没有OS X”。 不用担心，我没有忘记您Windows的人-您可以获取最接近的同等应用程序Prepros 。

---

接下来..

在下一部分中，我们将研究如何使用这个更加动态的基于Sass的Foundation版本执行的操作，包括自定义构建，更改默认样式等等。

翻译自: https://webdesign.tutsplus.com/tutorials/setting-up-foundation-with-sass-and-compass--webdesign-15288

compass sass