1.搭建环境(简单的下载安装Ruby)下载安装Ruby,Windows下的Ruby下载,Mac OS X 就跳过这一步,Linux自己去找吧(这部分用户的强项)
- How to Install Xcode, Homebrew, Git, RVM, Ruby & Rails on Snow Leopard, Lion, and Mountain Lion
- Ruby on Rails development with Mac OS X Mountain Lion
- CSS预处理器——Sass、LESS和Stylus实践
- ruby安装(Windows)
- RubyInstaller for Windows
建议安装的时候勾选下,这样可以直接通过cmd命令行操作(不必手动添加Path)2.安装SASS完成第一步之后,在开始菜单中找到并运行Ruby命令行,如图
启动可以看到命令行窗口,安装SASS(LESS安装方法相同),在命令行键入如下代码(其实官网顶部所列的三条即为常用的)并回车:
gem install haml
如下图所示:
3.创建SASS项目不使用其他任何库的SASS
首先进入到你本地项目目录下,我的放在e盘中,如下所示:
e:
这个时候就进入了项目目库中:
例如我们要创建一个项目,其名称叫作“mysass”:
mkdir mysass
此时mySass这个项目就在E:mysass中了,要是你不放心,你可以使用ls命令查验一下:
ls
为了让项目规化的更完美一些,我把.scss的SASS文件都放在sass目录中,而需要转译出来的.css文件都将放在css目录中。因此,我们还需要在mySass项目中创建sass和css两个文件夹:
进入mysass文件夹中创建sass目录和css目录
4.普通SASS的转译接下来打开编辑器,新建一个文件,并且在里面编辑一段简单的SASS代码,如下所示:
$main-color: #ce4dd6;
$style: solid;
.navbar {
border-bottom: {
color: $main-color; style: $style;
}
}
a {
color: $main-color;
&:hover {
border-bottom: 1px $style;
}
}
并且将此文件命名为style.scss保存在mySass/sass下。
转译出来的CSS样式为:
.navbar {
border-bottom-color: #ce4dd6; border-bottom-style: solid;
}
a {
color: #ce4dd6;
}
a:hover {
border-bottom: 1px solid;
}
使用sass转译.scss文件,有一个不足之处,就是我们修改了.scss文件,不会自动转译。如果要时时刻刻看到修改sass转译后的css,只需要在sass命令的基础上添加一个参数--watch就可以。
为了验证这样的说法,我们先把刚才转译出来的style.css删除,然后通过sass --watch命令重新转译一回:
$ sass --watch sass/style.scss
这样一来,你可以看到提示:
>>> Sass is watching for changes. Press Ctrl-C to stop. overwrite sass/style.css
sass/style.scss转译到sass/style.css下,并没有转到css目录中,这是他不足的一处。转译出来的在不在css目录下,我想你并不会太在意(大不了到时copy一下),而关心的是,他是不是如前面所说的,可以时间监控转译.scss文件。
摘自:http://ued.ctrip.com/blog/?p=3417
http://uecss.com/sass-less-how-to-install-and-use.html
参考:http://www.w3cplus.com/preprocessor/organize-that-sass.html