1. 安装ruby
1.1 下载地址
ruby官网 https://rubyinstaller.org/downloads/
RubyInstaller是一个在Windows下的安装程序,用来安装Ruby语言的开发工具和运行环境支持。同时还包含帮助文档等。
1.2 更改源下载地址
更改为国内源下载地址
http://gems.ruby-china.com/
RubyGems 一直以来在国内都非常难访问到,在本地你或许可以翻墙,当你要发布上线的时候,你就很难搞了!
这是一个完整 RubyGems 镜像,你可以用此代替官方版本,我们是完全基于 CDN 技术来实现,能确保几乎无延迟的同步。
如何使用?
请尽可能用比较新的 RubyGems 版本,建议 2.6.x 以上。
$ gem update --system # 这里请翻墙一下
$ gem -v
2.6.3
$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.com
确保只有 gems.ruby-china.com
2. 安装Sass
sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)
window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby。
安装完成后需测试安装有没有成功,在命令行中输入:ruby -v
如成功则会显示如下界面:
compass安装教程
compass和sass相当于,jquery和javascript,一个是封装的css库,另一个是javascript库,它们都目的是一样的,简化开发。
安装
一般来说,安装SASS的话,会自动帮助你安装compass。如果不确认是否有安装compass,在cmd中输入
compass -v
显示 'compass' 不是内部或外部命令,也不是可运行的程序或批处理文件。代表未安装compass。
显示如下,那么安装成功。
D:WEBaaamyproject>compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
安装指令
gem update --system #先更新gem
gem install compass #安裝Compass
其它指令
gem query –remote #卸载
md mycompass /# md 建立空文件夹
建立compass项目
cmd进入网站目录,在cmd中,输入以下指令。
compass create myproject
myproject是项目的名字,执行后,会下载compass项目文件到指定目录下: - config.rb -> 配置文件 - .sass-cache -> 缓存文件 - sass -> sass文件 - stylesheets -> sass编译文件
cofing.rb 配置文件
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
//可以外加指令
output_style = :compressed //编译格式指定
编译文件
执行编译
compass compile
只有在配置文件下,才能执行编译,不然会找不到.scss文件。
D:WEBaaamycompassmyprojectsass>compass compile
Compass can't find any Sass files to compile.
Is your compass configuration correct?.
If you're trying to start a new project, you have left off the directory argumen
t.
Run "compass -h" to get help.
在命令行模式下,除了一次性编译命令,compass还有自动编译命令
compass watch
结束自动编译按 CTRL + C,同样,也需要在配置文件下执行自动编译,才执行。
调用模块报错
如果调用模块报错,有可能是编码错误。