sass和compass | 易学教程

sass

sass是一种css的开发工具，而且是一款基于ruby的开发工具，所以想要使用这个工具必须先安装ruby。sass提供两种后缀格式的文件：.scss和.sass。区别是，scss完全兼容css格式，而sass则必须遵守严格的缩进并且不使用{}

sass使用

.scss文件

.container {
	.content {
		margin: 10px;
	}
}

编译

suntopo@suntopo-X550VX:~/Desktop$ sass test.scss
.container .content {
  margin: 10px; }
suntopo@suntopo-X550VX:~/Desktop$

在不指定任何参数情况下，sass默认输出到终端

指定目标路径

suntopo@suntopo-X550VX:~/Desktop$ sass test.scss ./test.css

将生成test.css和test.css.map两个文件

指定输出格式

sass中有四种css的输出格式：nested(默认)，apended(没有缩进)，compact(简洁)，compressed(压缩)

suntopo@suntopo-X550VX:~/Desktop$ sass --style compressed test.scss 
.container .content{margin:10px}

文件监控

如果每次修改都手动编译很不方便，sass也提供了文件监控功能实现修改后自动编译

suntopo@suntopo-X550VX:~/Desktop$ sass --watch test.scss:test.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
      write test.css
      write test.css.map

compass

sass本身只是一个编译器，而compass是在它基础只是进一步的封装。封装了一系列有用的模块和模板，是对sass的补充。

compass使用

创建

suntopo@suntopo-X550VX:~/Desktop$ compass create test
directory test/ 
directory test/sass/ 
directory test/stylesheets/ 
   create test/config.rb 
   create test/sass/screen.scss 
   create test/sass/print.scss 
   create test/sass/ie.scss 
    write test/stylesheets/ie.css
    write test/stylesheets/print.css
    write test/stylesheets/screen.css

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/


To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>

介绍的很清楚，就不多说

编译

suntopo@suntopo-X550VX:~/Desktop/test$ compass compile
suntopo@suntopo-X550VX:~/Desktop/test$ compass compile --output-style compressed

监听

suntopo@suntopo-X550VX:~/Desktop/test$ compass watch

compass模块

核心模块

Browser Support
CSS3
Animation
Appearance
Background Clip
Background Origin
Background Size
Border Radius
Box Shadow
Box Sizing
Columns
Filter
Flexbox
Font Face
Hyphenation
Images
Inline Block
Opacity
CSS Regions
Text Shadow
Transform
User Interface
Helper
Layouts
Grid Background
Sticky Footer
Stretching
Reset
Typography
Links
Lists
Text
Vertical Rhythm
Utilities
Links
Lists
Text
Color
General
Sprites
Tables

关于compass的模块的具体使用

来源：oschina

链接：https://my.oschina.net/u/1249401/blog/759655

标签

Sass

编程语言

compass

css