为项目单独建立一个文件夹，同时建立一个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中经常使用的数值，包括颜色、字符类型，以及其他更多的东西。这里，我将用它存储按钮的颜色，即可以简化代码也有利于重复使用。