Encountering Sass and Compass - Compass Chapter

This article mainly explains the content of Compass. As we all know, Compass is a tool library for Sass. If you don’t know much about Sass, you can go to the Sass chapter of Sass and Compass. Sass itself is just a “CSS preprocessor”, and Compass is based on it. It encapsulates a series of modules and templates to supplement the functions of Sass.

1.Compass installation

Like Sass, Compass is also developed in Ruby language, so Ruby must be installed before installing Sass. The process of installing Ruby will not be described in detail. After installing Ruby, you can directly enter the following command on the command line

sudo gem install compass

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

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

2.Compass initializes a project

Next, we need to create a Compass project of our own. Assuming its name is learn-compass-init, then enter

compass create learn-compass-init

A learn-compass-init subdirectory will be generated in the current directory (Tip: Windows players can hold down shift + right-click the mouse on the file that needs to be created to open a command line window here).

Enter 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. The former stores the Sass source files we need to write, and the latter stores the compiled css files

3.Compass compile a project

Everyone who knows Sass knows that the files we write with the suffix scss can only be used on our website if they are compiled into css files, so Compass provides a series of compilation commands. Run the following command in the root directory of the project

compass compile

The scss file with the suffix name in the Sass subdirectory will be compiled into a css file and saved in the stylesheets subdirectory.

Some people will say that it is too troublesome to perform compass compile once to modify the scss file, so compass also provides automatic compilation commands as follows

compass watch

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

By default, the compiled css file will have a lot of comments, but we only need the compressed css file. In this case, you need to use the following command

compass compile --output-style compressed

4.Modules in Compass

Comapss adopts a module structure. Different modules provide different functions. We can introduce modules as needed during development. Below I will focus on the main functions of each module.

Compass has six built-in modules, including the following

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

Reset module: It is a browser reset module that reduces browser differences, that is, resets the differences between browsers.

Layout module: Provides the ability to control page layout, for example, the sub-elements in a container can be filled horizontally and vertically.

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

css3 module: Provides cross-browser CSS3 capabilities. I believe you will never have a headache from adding browser prefixes after using it.

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

Typography module: Modify text style and vertical rhythm.

Utilities module: It can be said that Compass puts all the content that cannot be placed in other modules in this module.

In fact, Compass also provides the Browser Support method: it is mainly used to configure which browsers Compass supports by default, and which version of the specified browser is supported by default. Once modified, it will affect the output of the other six modules and needs to be customized for different Browsers make different adaptations.

I will describe the usage and features of each module one by one in the following articles.