1.搭建环境(简单的下载安装Ruby)下载安装Ruby,Windows下的Ruby下载,Mac OS X 就跳过这一步,Linux自己去找吧(这部分用户的强项)

sass 环境 要求python sass部署_xcode

建议安装的时候勾选下,这样可以直接通过cmd命令行操作(不必手动添加Path)2.安装SASS完成第一步之后,在开始菜单中找到并运行Ruby命令行,如图

sass 环境 要求python sass部署_xcode_02



启动可以看到命令行窗口,安装SASS(LESS安装方法相同),在命令行键入如下代码(其实官网顶部所列的三条即为常用的)并回车:

gem install haml

如下图所示:

sass 环境 要求python sass部署_ruby_03



安装成功如下图所示:

sass 环境 要求python sass部署_ruby_04


3.创建SASS项目不使用其他任何库的SASS

首先进入到你本地项目目录下,我的放在e盘中,如下所示:


sass 环境 要求python sass部署_xcode_05

sass 环境 要求python sass部署_sass 环境 要求python_06

e:

这个时候就进入了项目目库中:

例如我们要创建一个项目,其名称叫作“mysass”:

mkdir mysass

此时mySass这个项目就在E:\mysass中了,要是你不放心,你可以使用ls命令查验一下:

ls

为了让项目规化的更完美一些,我把.scss的SASS文件都放在sass目录中,而需要转译出来的.css文件都将放在css目录中。因此,我们还需要在mySass项目中创建sass和css两个文件夹:
进入mysass文件夹中创建sass目录和css目录

sass 环境 要求python sass部署_操作系统_07


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://www.w3cplus.com/preprocessor/organize-that-sass.html