Sass入门指南--Sass安装

日期:2015-07-01 17:22:12

一、什么是Sass

Sass 是Syntactically Awesome Stylesheete Sass的缩写,是由Hampton Catlin开发的。

Sass是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

二、安装Sass

Sass是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装Sass。

1436949587905107.jpg


ruby官网下载exe安装包,然后安装。

1436964737593722.jpg

至少选中中间的,免得还要自己手动添加环境变量(让你可以在控制台全局使用 ruby 命令),不然以后使用编译软件的时候会提示找不到ruby环境。

安装成功后在命令行输入命令:

ruby -v

如果出现ruby版本号就说明安装成功了。

接着在命令行输入安装Sass的命令:

gem install sass

到了这一步通常会有一个问题,由于国内网络原因发现安装过程通常会很慢,或是失败。这时候我们可以把gem的源换成国内的,比如ruby-china。接着查看gem源地址,命令行输入:

gem sources -l

这时候会看到一个地址:http://rubygems.org/

下面把这个源地址换成ruby-china的:

gem sources --remove https://rubygems.org/  # 移除默认源
gem sources -a https://gems.ruby-china.org/  # 添加ruby-china的源
gem sources -l  # 请确保只有 https://gems.ruby-china.org/

接着查看当前使用的源是哪个,如果是ruby-china的,则表示可以输入Sass安装命令gem install sass了。


2016/3/24日更新:

在windows系统下替换源地址时会出现错误异常,这个问题有很多人遇到过了,当执行 gem sources -a https://gems.ruby-china.org/时会出现如下错误:

Error fetching https://gems.ruby-china.org/:    
     SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://gems.ruby-china.org/specs.4.8.gz)

在网上找到了解决方法,https://github.com/ruby-china/rubygems-mirror/wiki 在ruby-chian社区看到同样的问题。

如果按链接上面给的做后还无法解决问题,就只能http来解决此问题了。 gem sources -a http://gems.ruby-china.org/

三、Sass常用命令

升级Sass版本的命令:

gem update sass

查看Sass版本的命令:

sass -v

帮助命令:

sass -h

下面开始学习Sass的语法