学习使用Sass预处理器(二)
2014-03-11 12:16:26

为项目单独建立一个文件夹,同时建立一个index.html文件,后面可以向里面添加代码。下一步,打开CodeKit,进入File菜单,选择“New Compass Project”。你会看到一个对话框,询问你的项目文件夹的位置和编辑后的文件夹的位置,确认一下你看到的是否与下图相符。

我们上面设置的就是Sass文件的位置,以及编译文件的位置,和Compass写入CSS的方式。这里,我把它设置成展开方式,这样我就能看到CSS的外观,而设置成压缩模式会使CSS的文件变小。你可以自主决定怎样组织你的项目。Compass会创建项目,以及CSS和Sass文件夹的位置。

现在开始使用Sass代码

在我们的HTML文件中,所有我们需要的东西都只是一些简单的代码,以及一个指向项目文件夹中CSS文件的链接。

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>Simple CSS3 Button</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="container">

<a class="button">Click Me!</a>

</div>
</body>
</html>
 


上面是我们需要的所有HTML代码。现在,在上面写入Sass代码。打开你常用的文本编辑器,建立一个新文件,把它存储到sass文件夹,重命名为style.css。我们将在SCSS中完成所有代码的输出,Sass能够生成SCSS,他将会把事情变得更简单,对于初学者来说不会这么严格。

在文件的开头,我们会为HTML文件写一些基本的reset,Compass的输出,并且写一些用于按钮的颜色变量。

@import "compass";

//Simple Reset
body, div, a {
	margin: 0;
	padding: 0;
	border: 0;
}

a {text-decoration: none;}

a:focus {outline: 0;}

//Colour Variables
$button-colour: #2e6bc6;
$button-start: #37a0dc;
$button-stop: #2068a6;
$border: #163861;
$text-shadow: #06304b;

//Hover colours
$button-hover-colour: #2e7dc6;
$button-hover-start: #3f9ff0;
$button-hover-stop: #2874a9;
$focus-shadow: #0b3c5f;

//Main Styles
body {
	font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
	

在文件的开头,我们将调用Compass文件,这样我们就能够在稍后的程序中使用它。我们也写了一个简单的reset,我们也使用了他的一个特性:变量。他可以存储我们在CSS中经常使用的数值,包括颜色、字符类型,以及其他更多的东西。这里,我将用它存储按钮的颜色,即可以简化代码也有利于重复使用。