Probe into Compass

1. Install Compass:

sudo gem install compass

If you are using a Windows system, omit the previous sudo.

2. Project initialization

Next, (go to the target directory first.) To create your Compass project, assuming its name is MyProject, type at the command line:

Enter target directory syntax:

Column 1, the root directory is the top level of the directory tree of the drive, to return to the root directory, enter at the command line: CD \

Example 2, if you want to return to the previous level directory, enter the CD at the current command prompt. Such as:

Example 3, if you want to go to the next level directory, enter the CD directory name at the current command prompt. At the command prompt c:\> enter the CD "Documents and setting" such as:

Example 4, if you want to change the current drive directory C:\Documents and Settings, go to the D drive default directory, enter d at the current command line: After the results such as

Example 5 when using a drive letter CD displays the current directory of the drive, enter CD e in the current directory of the C drive:

Example 6, if you want the current C drive to change the default directory on the D drive to D:\word, enter the CD D:\word at the command line such as:

I don't believe you can verify that the default directory for the D-Drive of D-carriage has changed as

Example 7, if the current directory is C:\Documents and Settings to switch to D:\word on the command line to enter the CD D:\word enter after entering D:
Example 8, in the previous example to enter into the d:\word to input two times, the first input CD D:\word second input D: can one step into the D:\word directory? The answer is yes, or just add the parameter/d to the example, such as cd/d D:\word execution results such as: NOTE: This parameter is valid under 2k/xp/vista/win7/

Compass

Next, to create your compass project, assuming its name is MyProject, type at the command line:

Compass Create MyProject

A MyProject subdirectory is generated in the current directory

Enter this directory:

CD MyProject

You will see that there is a config.rb file, which is the configuration file for your project. There are also two subdirectories sass and stylesheets, which store sass source files, which store the compiled CSS files.

Next, you can write the code.

Iv. compiling

Before we write the code, we need to know how to compile it. Because we write the suffix named Scss file, only compiled into a CSS file, can be used on the site.

Compass's Compile command is

Compass Compile

This command runs under the project root and compiles the Scss file in the SASS subdirectory into a CSS file, which is saved in the stylesheets subdirectory.

By default, the compiled CSS file comes with a large number of comments. However, the production environment requires a compressed CSS file, when you use the--output-style parameter.

Compass Compile--output-style Compressed

Compass compiles only the changed files, if you want to recompile the unchanged files, you need to use the--force parameter

Compass Compile--force

In addition to using command-line arguments, you can specify the compilation mode in configuration file CONFIG.RB.

Output_style =: Expanded

: Expanded mode means that the original format is preserved after compilation, and other values include: nested, compact, and: compressed. After entering the production phase, it should be changed to: Compressed mode

Output_style =: Compressed

You can also intelligently determine the compilation mode by specifying the value of the environment (:p roduction or: development).

Environment == (Environment = =:p roduction)? : Compressed:: Expanded

In command-line mode, Compass also has an auto-compile command in addition to one-time compilation commands.

Compass Watch

Once the command is run, the Scss file is automatically compiled into a CSS file as long as it changes.

For more Compass command-line usage, please refer to the official documentation.

V. Module of Compass

Compass uses a modular structure that provides different functions for different modules. Currently, it contains five modules:

* Reset * Reset * CSS3 * layout * Typography * Utilities

Below, I'll describe these five built-in modules in turn. They provide the main features of compass, but in addition to them, you can load third-party modules on the Web yourself, or write your own modules.

Six, reset module

In general, it is necessary to reset the browser's default style before writing your own style.

The wording is

@import "Compass/reset";

The @import command above is used to specify the load module, which is the load reset module. After compiling, the corresponding CSS reset code is generated.

Seven, CSS3 module

Currently, the module provides 19 kinds of CSS3 commands. Here, I introduce three of them: rounded corners, transparent and inline chunks.

7.1 Rounded Corners

Rounded Corners (Border-radius) are written in the notation

{ @include Border-radius (5px); }

The @include command above indicates that a mixin (similar to a C-language macro) is called, and 5px is the parameter, which is used to specify the radius of the fillet.

The compiled code is

{ -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px;　　Border-radius: 5px; }

If you want only the upper-left corner to be rounded,

@include Border-corner-radius (top, left, 5px);

7.2 Transparent

Transparent (opacity) is written as

{ @include opacity (0.5); }

Build after compilation

{ filter: progid:DXImageTransform.Microsoft.Alpha (opacity=0.5);　　opacity: 0.5; }

The opacity parameter 0.5, which indicates a transparency of 50%.

A completely transparent notation is

@include opacity (0);

Completely opaque is

@include opacity (1);

7.3 In-line chunks

The inline chunk (Inline-block) is written as

{ @include inline-block; }

Build after compilation

{ display: -moz-inline-stack; display: inline-block; vertical-align: Middle; *vertical-align: auto; Zoom: 1;　　*display: inline; }

Eight, layout module

The module provides layout functionality.

For example, the footer section of a specified page always appears at the bottom of the browser:

{ @include sticky-footer (54px); }

Also, for example, specify that the child elements occupy the space of the parent element:

{ @include stretch; }

Nine, typography module

This module provides layout functionality.

For example, the mixin of the specified link color is:

Link-colors ($normal, $hover, $active, $visited, $focus);

Write when used:

{ @include link-colors (#00c, #0cc, #c0c, #ccc, #cc0); }

Ten, Utilities module

This module provides some functionality that is not part of other modules.

For example, clear float:

{ @include clearfix; }

Again, for example, the table:

{ @include table-scaffolding; }

Build after compilation

{ text-align: Center;　　font-weight: bold;　　}{ padding: 2px;　　}{ text-align: right; }

Xi. helper function

In addition to modules, Compass also provides a range of functions.

Some functions are useful, such as image-width () and Image-height () to return the width and height of the picture.

For example, Inline-image () can convert a picture to data protocol.

{ background-image: inline-image ("Icon.png");}

Compiled to get

{ background-image: url (' data:image/png;  Base64,ibror ... QMCC ');}

The main difference between functions and mixin is that you do not need to use the @include command, which can be called directly.

Probe into Compass