sass和compass

时间 2019-11-12

标签 sass compass 繁體版

原文原文链接

sass

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

sass使用

.scss文件web

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

编译sass

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

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

指定目标路径工具

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

将生成test.css和test.css.map两个文件开发工具

指定输出格式ui

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

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

文件监控code

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

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的模块的具体使用