Sass and compass--Review

Compass is a tool library for SASS
Based on Sass, Compass encapsulates a series of useful modules to complement and enrich sass's energy

Installation:
Compass was developed in the Ruby language, so you must install Ruby before installing it.
Command:

Gem Install Compass
Project initialization:
To create a project for your compass, if the project is named MyProject
Compass Create MyProject
This directory will be generated in the current directory, there are config.rb files, there are two subdirectories sass and stylesheets The former store sass source files, the latter put the compiled
CSS file.

Compile:
When I developed it, I wrote a file with the file suffix named Scss. Only the CSS files can be compiled for use on the website.
Compass's Compile command is
Compass Compile
The 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.
The default compiled CSS file with a large number of comments, the production environment needs to compress the CSS file
Compass Compile--output-style Compressed
If you recompile 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 configuration file CONFIG.RB.

Output_style =: Expanded
: Expanded means that the original format is preserved after compilation, and other values include: nested,
: After the compact and compressed enter the production phase, they should change 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 =:d Evelopment
Output_style = (Environment = =:p roduction)? : Compressed:: Expanded

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

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

Module of Compass

Compass uses a modular structure, different modules provide different functions, built-in 5 modules.
Reset CSS3 layouttypography unilities

Reset Module

Before you write your own style, it is necessary to reset the browser's default 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.

CSS3 Module
The module provides 24 CSS3 commands. Such as:
Rounded Corners (Border-radius) of the notation,
@import "COMPASS/CSS3";
. rounded {
@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:
. 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 want only the upper-left corner to be rounded,
@include Border-corner-radius (top, left, 5px);

Layout module
The module provides layout functionality,
For example, the footer portion of the specified page appears at the lowest end of the browser.
@import "Compass/layout";
#footer {
@include Sticky-footer (54PX);
}
Specifies that the child element fills the space of the parent element:

@import "Compass/layout";
#stretch-full {
@include Stretch;
}
Typography module
The module provides a panel function
For example, the mixin of the specified link color is:
Link-colors ($normal, $hover, $active, $visited, $focus);
Write when used:
@import "Compass/typography";
A
@include link-colors (#00c, #0cc, #c0c, #ccc, #cc0);
}

Utilities Module

This module provides some functionality that is not part of other modules.
For example, clear float:

Import "compass/utilities/";
. clearfix {
@include Clearfix;
}
such as tables:
@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 functions
In addition to modules, Compass provides a range of functions.
There are some useful functions, image-width () and Image-height () return the width and height of the picture
For example, Inline-image () can convert a picture to data protocol.

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

Compiled to get
. Icon {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.