Encounter Sass and Compass Compass

This article mainly explains the content of compass, it is well known that compass is a SASS tool library, if the sass do not know the students can be sass and Compass Sass Chapter Sass itself is just a "CSS preprocessor", compass on its basis, Encapsulates a range of modules and templates to complement the sass functionality.

Installation of 1.Compass

Like Sass, Compass is also developed in Ruby language, so you must install Ruby before installing Sass, and the process of installing Ruby is not to be mentioned, but after you install Ruby, you can enter the following command directly from the command line.

sudo gem install compass

Windows is entered in cmd, but the preceding sudo needs to be omitted.

Under normal circumstances, Compass (together with SASS) is installed.

2.Compass Initializing a project

Next, to create a compass project that belongs to us, assuming its name is Learn-compass-init, then enter it at the command line

compass create learn-compass-init

A Learn-compass-init subdirectory is generated in the current directory (hint: Windows players can press and hold shift+ right-click on the file you want to create to open a command-line window here).

Go to the subdirectory you just created

cd learn-compass-init

You will see the following structure, where the config.rb file is the project configuration file. There are also two subdirectories sass and stylesheets, which store the sass source files we need to write, which store the compiled CSS file

3.Compass Compiling a project

Understand sass know, we write the suffix named scss files only compiled into CSS files to be used on our site, so Compass provides a series of compile commands. Run the following command in the root directory of the project

compass compile

The suffix name scss file in the SASS subdirectory is compiled into a CSS file and saved in the stylesheets subdirectory.

Someone would say that modifying a scss file will need to be performed once the compass compile is too cumbersome, so compass also provides the following automatic compilation commands

compass watch

Once the command is run, the corresponding CSS file in the stylesheets subdirectory is automatically compiled as soon as the Scss file changes.

By default, the compiled CSS file will have a large number of comments, but we only need to compress the CSS file, then it is necessary to use the following command

compass compile --output-style compressed

Modules in 4.Compass

COMAPSS module structure, different modules to provide different functions, we in the development can be as needed to introduce modules, I will focus on the main functions of each module.

Compass contains six modules, including the following

-   reset-   css3-   layout-   typography-   utilities-   helpers

Reset module: Is the browser's reset module, reducing browser differences, that is, resetting the differences between browsers.

Layout module: Provides the control of the page layout, such as a container of sub-elements in the horizontal vertical fill.

It is important to note that only the Reset module and the layout module need to be explicitly specified to be introduced, that is, as long as @import "compass" can introduce other modules.

CSS3 Module: Provides the ability to cross-browser CSS3, I believe you will never have to add browser prefix after the headache.

Helpers module: Contains a series of functions, similar to the list of functions in the sass (very few but very powerful).

Typography module: The style of the decorated text, the vertical rhythm.

Utilities module: It can be said that compass will not be able to put the contents of other modules are placed in the module.

In fact, Compass also provides the method of browser support: It is mainly used to configure which browsers the compass supports by default, which version is supported by default for the specified browser, and once the modification affects the output of the other six modules, it needs to be adapted for different browsers.

On the use of the various modules and features I will be in the following article one by one described.

Encounter Sass and Compass Compass