compass入门-优快云博客

本文详细介绍如何安装Compass及创建项目的过程，并深入探讨了项目目录结构，包括.sass-cache、.sass等关键目录的作用。此外，还介绍了config.rb配置文件的设置方法，以及不同输出样式的适用场景。最后，通过normalize.css插件的安装和使用，展示了如何灵活地引入和定制CSS重置样式。

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

安装

$ gem install compass

创建项目

$ compass create [program-name]

将会生成目录
- sass-cache sass缓存，使得编译更快速
- sass 存放sass文件的目录
- stylesheets 编译成的css文件存放目录
- config.rb 配置文件
目录名可以在config.rb中修改

config.rb

/*
 *sass@import指令是可以重复引入同一文件的，这句话可以防止重复引入，如果要重复引入，在后面加'!'
 *比如 @import 'compass/reset!';
 */
require "compass/import-once/activate"

output_style输出格式，有四种值

值	作用
expanded	默认值，按常规css展开形式
nested	嵌套的，用缩进表示嵌套深度
compact	紧凑的，一个样式都放在一行
compressed	压缩的，去掉所有注释，在注释前面加`!`可以防止注释被去掉

插件

normalize.css

gem install compass-normalize

在config.rb中添加require "compass-normalize",在sass文件中添加@import "normalize"即可使用
normalize.css有8大模块组成
base,html5,links,typograohy,embeds,groups,forms,tables.
使用@import "normalize-version";@import "normalize/normalize-module";可以只引入相应模块，`