在上一篇文章中 ,我们曾经提到过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方面做得更好。