sass安装

本文详细介绍了Sass的安装过程,包括Ruby的下载与安装,以及在遇到网络问题时如何使用淘宝RubyGems镜像。此外,还讲解了Sass的编译方法,包括命令行编译、GUI工具编译(如Koala和CodeKit)以及自动化编译工具(如gulp和grunt)。在使用Sass时,需要注意文件编码应为UTF-8,避免路径中出现中文字符,以防止编译错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.下载

Ruby本地下载
Ruby官网下载

这里写图片描述

2.安装

第一步.双击rubyinstaller-2.3.3-x64.exe文件
建议安装在C盘。

这里写图片描述

安装完成后在打开命令行

gem

这里写图片描述

Ruby安装成功!

第二步.安装sass或者直接安装compass

Win + R 打开命令行

gem install compass

这里写图片描述

检测是否安装成功

sass -v

这里写图片描述

安装成功!

如果碰到网络原因无法安装时可以使用淘宝 RubyGems 镜像安装 Sass。只是我们需要通过 gem sources 命令来配置源,先移除默认的 https://rubygems.org 源,然后添加淘宝的源 https://ruby.taobao.org

第一步:移动默认的源

gem sources --remove https://rubygems.org/

第二步:指定淘宝的源

gem sources -a https://ruby.taobao.org/

第三步:查看指定的源是不是淘宝源

gem sources -l

返回结果如下:

*** CURRENT SOURCES ***
https://ruby.taobao.org

请确保只有 ruby.taobao.org。如果无误之后,执行下面的命令:

gem install sass

其他命令如下:
更新sass命令

gem update sass

卸载sass命令

gem uninstall sass

scss编译

1.命令编译

看一个简单的示例,假设我本地有一个项目,我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件,并且将编译出来的文件放在“css”文件夹中,我就可以在我的命令终端中执行:

sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦我的 bootstrap.scss 文件有任何修改,只要我重新保存了修改的文件,命令终端就能监测,并重新编译出文件。

2.GUI工具编译

Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

3.自动化编译
自动化编译用gulp或grunt

在编译 Sass 代码时常常会碰到一些错误,让编译失败。这样的错误有系统造成的也有人为造成的,但大部分都是人为过失引起编译失败。

而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中,是不是支持“GBK”编码的。所以在创建 Sass 文件时,就需要将文件编码设置为“utf-8”。

另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败,在编译过程中都会有具体的说明,大家可以根据编译器提供的错误信息进行对应的修改。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值