compass sass_语法很棒的样式表：在Sass中使用Compass

在上一篇文章中 ，我们曾经提到过Compass 。 根据官方网站，它被描述为一个开源CSS创作框架 。

总之，指南针是无礼的扩展，像LESS元素的LESS ，它有一堆随时可以使用CSS3混入的，但它也增加了若干其他的东西，使其成为一个更强大的配套工具萨斯 。 让我们来看看。

安装指南针

与Sass一样，指南针也需要安装在我们的系统中 。 但是，如果您使用的是Scout App或Compass.app之类的应用程序 ，则没有必要。

没有它们，您需要通过Terminal / Command Prompt “手动”完成。 为此，请键入以下命令行；

sudo gem install compass

gem install compass

如果安装成功，您将收到如下所示的通知；

然后，在工作目录中运行以下命令行以添加Compass项目文件 。

compass init

指南针配置

如果已经运行了这个命令compass init ，那么现在您的工作目录中应该有一个名为config.rb的文件。 该文件用于配置项目输出。 例如，我们可以更改首选目录名称。

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

删除Compass生成的注释行； 如果需要打印注释，则将其设置为true否则将其设置为false 。

line_comments = false

我们还可以决定CSS输出。 我们可以选择四个选项:expanded ， :compact ， :compressed和:nested 。 目前，我们只需要对其进行扩展，因为我们仍处于开发阶段。

output_style = :expanded

我认为这些配置通常可以满足大多数项目的需要，但是如果您需要更多首选项，则可以始终参考此文档《 指南针配置参考》 。

最后，我们需要使用此命令行watch目录中的每个文件；

compass watch

与Sass中一样，此命令行将监视每个文件更改，并创建或更新相应CSS文件。 但是请记住，在config.rb配置完项目后运行此行，否则它将忽略文件中的更改。

CSS3 Mixins

在遍历CSS3之前，在我们的主要.scss文件中，我们需要使用以下行@import "compass";导入Compass @import "compass"; ，这将导入Compass中的所有扩展名。 但是，如果只需要CSS3，我们也可以使用@import "compass/css3"这一行来进行更具体的说明。

现在，让我们开始使用Saas和Compass创建一些东西。 在HTML文档中，假设您还创建了一个，则将放置以下简单标记：

<section>
	<div> </div>
</section>

这个想法也很简单。 我们将创建一个带有圆角的旋转框，下面是入门的Sass嵌套样式；

body {
	background-color: #f3f3f3;
}
section	{
	width: 500px;
  	margin: 50px auto 0;
	div {
		width: 250px;
		height: 250px;
		background-color: #ccc;
		margin: 0 auto;
	}
}

并且，为了使我们的矩形具有圆角，我们可以包含Compass CSS3 Mixins，如下所示；

body {
	background-color: #f3f3f3;
}
section	{
	width: 500px;
  	margin: 50px auto 0;
	div {
		width: 250px;
		height: 250px;
		background-color: #ccc;
		margin: 0 auto;
		@include border-radius;
	}
}

此border-radius Mixins将生成所有浏览器前缀，默认情况下，转角半径为5px 。 但是，我们也可以通过以下方式指定所需半径： @include border-radius(10px); } @include border-radius(10px); } 。

section div {
  width: 250px;
  height: 250px;
  background-color: #ccc;
  margin: 0 auto;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

接下来，作为计划，我们还将旋转盒子。 使用Compass真的很容易，我们要做的就是像这样调用转换方法。

body {
	background-color: #f3f3f3;
}
section	{
	width: 500px;
  	margin: 50px auto 0;
	div {
		width: 250px;
		height: 250px;
		background-color: #ccc;
		margin: 0 auto;
		@include border-radius(10px);
		@include rotate;
	}
}

该Mixins还将生成那些乏味的供应商前缀，并且默认情况下轮换使用45度。 请参阅下面生成CSS。

section div {
  width: 250px;
  height: 250px;
  background-color: #ccc;
  margin: 0 auto;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

指南针助手

Compass中最强大的功能之一是Helpers 。 根据官方网站的说法， 指南针助手是增强Sass提供功能的功能 。 好吧，让我们看一下下面的示例以获得清晰的画面。

添加@ Font-face文件

在此示例中，我们将使用@font-face规则添加自定义字体系列 。 在普通的CSS3中 ，代码如下所示，由四种不同的字体类型组成，对于某些人来说也很难记住。

@font-face {
  font-family: "MyFont";
  src:  url('/fonts/font.ttf') format('truetype'),
  		url('/fonts/font.otf') format('opentype'),
  		url('/fonts/font.woff') format('woff'),
  		url('/fonts/font.eot') format('embedded-opentype');
}

@include font-face("MyFont", font-files("font.ttf", "font.otf", "font.woff", "font.eot"));

上面的代码将生成与第一个代码段完全相同的结果，还将自动检测字体类型并将其添加到format()语法中。

但是，如果我们仔细看一下代码，您会发现我们没有添加字体路径（ /fonts/ ）。 那么，指南针如何知道字体的位置？ 好吧，请不要混淆，该路径实际上是从带fonts_path属性的config.rb派生的。

fonts_dir = "fonts"

因此，假设我们将其更改为fonts_dir = "myfonts" ，则生成的代码将为url('/myfonts/font.ttf') 。 默认情况下，当我们不指定路径时，Compass会将其定向到stylesheets/fonts 。

新增图片

让我们创建另一个示例，这次我们将添加一个图像。 通过CSS添加图像是很常见的事情。 我们通常通过使用background-image属性来做到这一点，就像这样；

div {
	background-image: url('/img/the-image.png');
}

在Compass中，我们可以使用image-url() Helpers代替它，而不必使用url()函数，并且类似于在上面添加@font-face ，我们可以完全忽略路径，并由Compass处理其余部分。

此代码还将生成与第一个代码段完全相同CSS声明。

div {
	background-image: image-url(the-image.png);
}

另外，Compass还具有Image Dimension Helpers ，它主要检测图像的宽度和高度，因此，如果我们需要在CSS中同时指定它们，我们可以再添加两行，如下所示：

div {
	background-image: image-url("images.png");
	width: image-width("images.png");
	height: image-height("images.png"); 
}

输出将变成这样；

div {
  background-image: url('/img/images.png?1344774650');
  width: 80px;
  height: 80px;
}

最终思想

好了，今天我们已经讨论了很多有关Compass的内容，您可以看到它确实是一个功能强大的工具，让我们以一种更加优雅的方式编写CSS。

而且，您已经知道，Sass不是唯一的CSS预处理程序 ； 还有LESS ，我们之前已经详细讨论过 。 在下一篇文章中，我们将尝试比较一下，这两者中的哪一个在预处理CSS方面做得更好。

• 下载源

翻译自: https://www.hongkiat.com/blog/saas-compass/