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

相關標籤/搜索

sass+compass+bootstrap

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。