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的文件名一致!