sass的安装与配置

发表于 分类于

安装

安装Ruby

由于Sass和Compass都是依赖于ruby的，所以首先得安装ruby；windows直接去官网下载或者使用rubyinstaller，推荐使用后者，下载一键配置，关键是下载速度快！

在ruby中安装各种包都是基于gem命令（类似于node.js中的npm），由于服务器在国外，安装包的速度当然慢的要死，所以要更换一下镜像，推荐使用ruby-China的镜像（淘宝的镜像今后不会维护了）：

更换前最好把自带的镜像删除（可以用gem source --remove命令移除），查看镜像列表可以使用命令行gem source -l；

1
gem source -a https://gems.ruby-china.org

安装Sass

1
gem sass

安装compass

1
gem compass

创建compass工程

通过compass create可以创建一个compass工程；

1
compass create projectNmae

创建后会生成一个名为projectName的文件夹，该文件夹代表了一个compass和sass工程，该文件夹下还会有一些默认生成的文件夹和文件：

1
2
3
4
5
6
7
|---stylesheets
    |---*.css
|---sass
    |---*.scss
|---.sass-cache
    |---
|---config.rb

这些文件夹的名称可以通过命令行参数进行定制，也可以直接在config.rb配置文件中进行设定；

1
compass create -sass-dir "sass" -css-dir "css" -javascript-dir "js" -image-dir "img"

也可以创建一个空的compass工程，即没有一些预定的css和scss文件；

1
compass create --bare

config.rb文件

config.rb文件时compass工程的核心，它设定了如何编译sass文件，怎么生成css文件；

一个常见的配置文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
require 'compass/import-once/activate'
# 通过 require 命令导入其它的compass插件

# http_path代表工程根目录的路径
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# cache代表是否开启sass编译缓存，默认开启（true）
cache = false

# output_style代表css文件输出样式
# output_style = :expanded or :nested or :compact or :compressed

# 是否开启资源相对路径功能
# relative_assets = true

# 是否在css文件中选择器的位置显示调试注释，默认开启

line_comments = false

css输出样式有四种：:expanded，:nested，:compact，:compressed；

在webStorm中配置compass工程

  1. 找到setting-language-stylesheets-compass，设置正确的compass安装路径和compass工程的config.rb文件路径；要注意的是compass安装路径指的是compass.bat文件所在地方，如：D:\Ruby\bin\compass.bat；

  2. 到setting-tool-File Watchers中新增一个Compass Scss的实例，以实现自动监视scss文件的改动并进行实时编译；

file watcher设置

编译

当编译的时候，对于文件名以下划线_开头的.scss文件是不会编译的；且编译后的.css文件名与.scss的文件名一致！