安装sass

￡神魔★判官ぃ 2022-06-06 03:52 300阅读 0赞

sass 是一个 css 的预处理器, 简写css, 以及CSS的导航, sass 基于 ruby, 需要先安装 ruby 然后在安装 sass

## 安装 Ruby ##

目的是 安装 sass, 可以快速的访问本地源

### 安装 ###

windows  
使用 rubyinstall 安装 ruby  
官方网站: [http://rubyinstaller.org/][http_rubyinstaller.org]

mac  
自带

centos

$ yum install ruby

ubuntu

$ apt-get install ruby

### 更换 ruby 源 ###

参见 [https://gems.ruby-china.org/][https_gems.ruby-china.org]

$ gem sources --remove https://rubygems.org/
    $ gem sources -a https://gems.ruby-china.org/
    $ gem sources -l

## 安装 sass ##

### 安装 ###

$ gem install sass

### 测试运行编译 ###

$ sass test.scss test.css
      --style
       # nested：嵌套缩进的css代码，它是默认值
       # expanded：没有缩进的、扩展的css代码。
       # compact：简洁格式的css代码。
       # compressed：压缩后的css代码。
    
    # watch a file
    $ sass --watch input.scss:output.css
    # watch a directory
    $ sass --watch ap/some:some/name

## 安装compass ##

$ gem install compass

### 创建项目 ###

$ compass create my-project
    $ cd my-project
    $ compass watch

## 常见错误 ##

### 创建 compass 项目报错 ###

$ compass create my-project

> “Errno::EACCES on line \[”897“\] of C: Permission denied”  
> LoadError on line \["55"\] of D: cannot load such file -- compass/import-once/activate

解决方法

// uninstall $ gem uninstall sass $ gem uninstall compass // install pre version $ gem install compass --pre $ gem install sass --pre

### 使用 compass 监控项目变动 ###

$ compass watch

> LoadError on line \["55"\] of D: cannot load such file -- wdm

解决方法   
安装 wdm

$ gem install wdm

### 安装 wdm 出错 ###

> ERROR: Error installing wdm: The 'wdm' native gem requires installed build tools.

Please update your PATH to include build tools or download the DevKit  
from '[http://rubyinstaller.org/down...][http_rubyinstaller.org_down...]' and follow the instructions  
at '[http://github.com/oneclick/ru...][http_github.com_oneclick_ru...]'

下载 `devKit` 包 然后根据 上边给出的地址进行 devKit的安装

重新安装 wdm

> Temporarily enhancing PATH to include DevKit...

Building native extensions. This could take a while...  
Successfully installed wdm-0.1.0  
Parsing documentation for wdm-0.1.0  
unable to convert "x90" from ASCII-8BIT to UTF-8 for ../../extensions/x64-mingw  
32/2.0.0/wdm-0.1.0/wdm\_ext.so, skipping  
unable to convert "x90" from ASCII-8BIT to UTF-8 for lib/wdm\_ext.so, skipping  
1 gem installed

后记，先按照一般的方法安装，在一般方法出错情况下再安装以上的方法 例如 --pre

### `sass @import “compass/reset” error` ###

> use compass watch instead of sass --watch sass:stylesheets. If you're using compass, you don't need to bother with sass command. Just use the compass command.

这里说的是你如果使用compass 就不要是用 sass 命令来监控文件的变动了

[http_rubyinstaller.org]: http://rubyinstaller.org/
[https_gems.ruby-china.org]: https://gems.ruby-china.org/
[http_rubyinstaller.org_down...]: http://rubyinstaller.org/downloads
[http_github.com_oneclick_ru...]: http://github.com/oneclick/rubyinstaller/wiki/Development-Kit