sass安装踩到的坑

1,462 阅读3分钟

最近自己在学习sass, 看大神们都在掘金发文章帮助别人,我也试着在掘金写一下,由于是本人第一次写文章,写的不好请多多包涵!

Sass是什么?

Sass 是一款强化 CSS 的辅助工具,提供了很多原生CSS没有的功能,比如变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,让我们可以高效的开发,变得简单和可维护。

Sass的安装

Sass是Ruby语言写的,因此安装sass前需要安装Ruby。mac下自带Ruby无需在安装Ruby。 window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。由于本人是Mac环境,下面着重介绍mac环境的安装。 首先我们通过gem来安装,运行下面代码

  sudo gem install sass  

Sudo 是一个允许系统管理员授权让普通用户执行部分或全部root命令的工具,也就是说它允许系统管理员分配给普通用户一些合理的“权利”,接着会让你输密码,输完密码就会安装。但此时可能又会遇到一个问题,错误信息如下

ERROR: Error installing sass: 

ERROR: Failed to build gem native extension. 

/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby extconf.rb 
mkmf.rb can't find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/include/ruby.h 

Gem files will remain installed in /Library/Ruby/Gems/2.0.0/gems/ffi-1.9.6 for inspection. 

Results logged to /Library/Ruby/Gems/2.0.0/gems/ffi-1.9.6/ext/ffi_c/gem_make.out 

我就遇到了这个问题,上网搜索发现有的回答是让运行下面代码

sudo apt-get install ruby-all-dev

运行后发现不对啊,又报了一个错:command not found: apt-get,此时我内心的想法是学个sass咋这么难呢,但不能放弃啊,于是我又回头仔细的看报错信息,发现产生这个错误的主要原因就是这句"You have to install development tools first."。原来我没有装开发者工具,Mac上的开发者工具就是Xcode,高兴地赶紧去装Xcode,却提示我系统不是最新,需要更新后才能下。又经过几个小时折腾,系统和Xcode终于搞定了。接着重新跑一下安装命令,你会惊喜的发现

Building native extensions.  This could take a while...
Successfully installed ffi-1.9.23
Fetching: rb-inotify-0.9.10.gem (100%)
Successfully installed rb-inotify-0.9.10
Fetching: sass-listen-4.0.0.gem (100%)
Successfully installed sass-listen-4.0.0
Fetching: sass-3.5.5.gem (100%)
Successfully installed sass-3.5.5
Parsing documentation for ffi-1.9.23
Installing ri documentation for ffi-1.9.23
Parsing documentation for rb-inotify-0.9.10
Installing ri documentation for rb-inotify-0.9.10
Parsing documentation for sass-listen-4.0.0
Installing ri documentation for sass-listen-4.0.0
Parsing documentation for sass-3.5.5
Installing ri documentation for sass-3.5.5
Done installing documentation for ffi, rb-inotify, sass-listen, sass after 34 seconds
4 gems installed

我们还得确认一下是否安装:

 sass -v

如果出现版本信息,那就说明安装成功啦,你可以愉快的玩sass了。

Sass初步体验

首先我们建一个scss文件,然后运行以下命令进行实时自动编译:

sass --watch demo.scss:demo.css

这样就可以练习sass语法了。具体的sass语法可以参考阮一峰老师的SASS用法指南。今天就写到这里了,以后再和大家分享我踩的一些坑,如有写的不对,还请大家指出。