sass和compass

2016-10-18 13:28:34来源:oschina作者:小昭归来人点击

第七城市


## 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:





```
介绍的很清楚,就不多说
编译
```
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模块
待续
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台