Sass and Compass -- Review, sasscompass

Sass and Compass -- Review, sasscompass

Compass is a tool library of sass.
On the basis of sass, compass encapsulates a series of useful modules to supplement and enrich sass's work capabilities,

　　Installation:
Compass is developed in the ruby language. Therefore, you must install ruby before installing it.
　　Command:

Gem install compass
　　Project initialization:
To create a Compass project, if the project name is myproject
Compass create myproject
This directory will be generated under the current directory, which contains the config. rb file, and two subdirectories, sass and stylesheets. The former stores the sass source file, and the latter stores the compiled
Css file.

　　Compile:
During development, I wrote a file with the suffix scss. Only after being compiled into a css file can the website be used.
The compile command of compass is
Compass compile
Run this command in the project root directory to compile the scss file in the sass subdirectory into a css file and save it in the stylesheets subdirectory.
By default, the compiled css file contains a large number of comments. The production environment needs to compress the css file.
Compass compile -- output-style compressed
If you re-compile a file that has not been modified
Compass compile -- force
In addition to using command parameters, you can also specify the compilation mode in the config. rb configuration file.

Output_style =: expanded
: Expanded indicates that the original format is retained after compilation. Other values include: nested,
: After compact and compressed enter the production stage, they must be changed to: compressed Mode.
Output_style =: compressed
You can also intelligently determine the compilation mode by specifying the value of environment (: production or: development.

Environment =: development
Output_style = (environment =: production )? : Compressed: expanded

In command line mode, in addition to one-time compilation commands, compass also has automatic compilation commands.

Compass watch
As long as the scss file changes, it will be automatically compiled into a css file.

Compass Module

Compass adopts the module structure. Different modules provide different functions and have five built-in modules.
Reset css3 layouttypography unilities

　　Reset Module

Before writing your own style, it is necessary to reset the default style of the browser.
Statement:
@ Import "compass/reset"
The preceding @ import command is used to specify the loading module. The reset module is loaded here. After compilation, the corresponding css reset code is generated.

　　CSS3 Module
This module provides the css3 command in 24. For example:
Border-radius,
@ Import "compass/css3 ";
. Rounded {
@ Include border-radius (5px );
}
The preceding @ include command calls a mixin (similar to a macro in C Language). 5px is a parameter and is used to specify the radius of the rounded corner.

The compiled code is:
. Rounded {
-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 only need the rounded corner in the upper left corner, write it
@ Include border-corner-radius (top, left, 5px );

　　Layout module
This module provides the layout function,
For example, the footer part of a specified page appears at the lowest end of the browser.
@ Import "compass/layout ";
# Footer {
@ Include sticky-footer (54px );
}
Indicates that the child element occupies the space of the parent element:

@ Import "compass/layout ";
# Stretch-full {
@ Include stretch;
}
　　Typography Module
This module provides panel Functions
For example, the mixin of the specified link color is:
Link-colors ($ normal, $ hover, $ active, $ visited, $ focus );
Written:
@ Import "compass/typography ";
A {
@ Include link-colors (# 00c, # 0cc, # c0c, # ccc, # cc0 );
}

　　Utilities Module

This module provides some functions that do not belong to other modules.
For example, clear floating:

Import "compass/utilities /";
. Clearfix {
@ Include clearfix;
}
For example, table:
@ Import "compass/utilities ";
Table {
@ Include table-scaffolding;
}

After compilation
Table th {
Text-align: center;
Font-weight: bold;
}
Table td,
Table th {
Padding: 2px;
}
Table td. numeric,
Table th. numeric {
Text-align: right;
}

　　　　Helper Function
In addition to modules, compass also provides a series of functions.
There are some useful functions: image-width () and image-height () return the width and height of the image.
For example, inline-image () can convert images into data.

@ Import "compass ";
. Icon {background-image: inline-image ("icon.png ");}

After compilation
. Icon {background-image: url ('data: image/png; base64, iBROR... QmCC ');}
The main difference between a function and a mixin is that you can directly call the function without using the @ include command.