sass

1. 安装ruby

1.1 下载地址

ruby官网 https://rubyinstaller.org/downloads/
RubyInstaller是一个在Windows下的安装程序,用来安装Ruby语言的开发工具和运行环境支持。同时还包含帮助文档等。

1.2 更改源下载地址

更改为国内源下载地址
http://gems.ruby-china.com/
RubyGems 一直以来在国内都非常难访问到,在本地你或许可以FQ,当你要发布上线的时候,你就很难搞了!
这是一个完整 RubyGems 镜像,你可以用此代替官方版本,我们是完全基于 CDN 技术来实现,能确保几乎无延迟的同步。

如何使用?
请尽可能用比较新的 RubyGems 版本,建议 2.6.x 以上。

$ gem update --system # 这里请FQ一下
$ 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:\WEB\aaa\myproject>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:\WEB\aaa\mycompass\myproject\sass>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,同样,也需要在配置文件下执行自动编译,才执行。

调用模块报错
如果调用模块报错,有可能是编码错误。

posted @ 2019-11-09 08:12  yasepix  阅读(205)  评论(0编辑  收藏  举报