Sass安装和配置

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

建议安装的时候勾选下，这样可以直接通过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

posted @ 2014-01-24 18:46 2公子阅读(403) 评论(0) 编辑收藏举报

刷新页面返回顶部

Sass安装和配置

公告