Sass and Compass, and sasscompass

Sass and Compass, and sasscompass

This article mainly describes the content of Compass. As we all know, Compass is an Sass tool library, if you are not familiar with Sass, you can skip Sass and Compass Sass. Sass itself is just a "CSS Preprocessor". Based on this, Compass encapsulates a series of modules and templates, added the Sass function.

1. Install Compass

Like Sass, Compass is developed in Ruby. Therefore, you must install Ruby before installing Sass, after Ruby is installed, enter the following command in the command line.

sudo gem install compass

Windows input in cmd, but the previous sudo must be omitted.

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

2. Compass initializes a project

Next, create a Compass project of our own. Assume that the project name is learn-compass-init. Then, enter

compass create learn-compass-init

A learn-compass-init subdirectory is generated under the current directory (note: windows players can press shift + Right-click the file to be created and choose to open the command line window here ).

Go to the created subdirectory

cd learn-compass-init

You will see the following structure. The config. rb file is the configuration file of the project. There are also two sub-directories, sass and stylesheets. The former stores the Sass source files to be compiled, and the latter stores the compiled css files.

3. Compile a project with Compass

All Sass users know that the files whose suffix is scss can be used on our website only when they are compiled into css files. Therefore, Compass provides a series of compilation commands. Run the following command in the project root directory:

compass compile

The suffix scss file in the Sass subdirectory is compiled into a css file and saved in the stylesheets subdirectory.

Some people may say that it is too troublesome to execute compass compile once to modify the scss file. Therefore, compass also provides the following automatic compilation command:

compass watch

After running this command, as long as the scss file is modified, it will be automatically compiled into the corresponding css file in the stylesheets subdirectory.

By default, the compiled css file will contain a lot of comments, but we only need to compress the css file, then we need to use the following command

compass compile --output-style compressed

4. modules in Compass

Comapss uses a module structure. Different modules provide different functions. We can introduce modules as needed during development. The following describes the main functions of each module.

Compass has six built-in modules, including the following:

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

Reset module: resets the browser to reduce the differences between browsers, that is, resets the differences between browsers.

Layout module: Provides page Layout control capabilities. For example, the sub-elements in a container are filled horizontally and vertically.

It is worth noting that only the Reset module and the Layout module need to be explicitly introduced, that is, as long as @ import "compass" can be introduced to other modules.

Css3 module: provides cross-browser css3 capabilities. I believe that you will never have a headache when adding a browser prefix.

Helpers module: contains a series of functions, which are similar to the function list in Sass (rarely used but powerful ).

Typography module: modifies the text style and vertical rhythm.

Utilities module: it can be said that Compass can not put the content of other modules in this module.

In fact, Compass also provides the Browser Support method: it is mainly used to configure which browsers are supported by Compass by default and which version is supported by the specified Browser by default, once modified, the output of the other six modules will be affected, and different adaptation needs to be made for different browsers.

I will discuss the usage and features of each module in the following articles.