Sass vs. Compass – Review

compass is a tool library for sass
compass encapsulates a series of useful modules based on sass to supplement and enrich the functionality of sass.

Installation:
compass is It is developed in ruby ​​language, so ruby ​​must be installed before installing it.
Command:

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

Compilation:
When I was developing, I wrote a file with the file suffix scss. Only when compiled into css files can they be used on the website. The compilation command of
compass is
compass compile
This command is run in the project root directory and will compile the scss file in the sass subdirectory into a css file and save it in the stylesheets subdirectory.
The css file compiled by default has a large number of comments. The production environment requires compressed css files
compass compile --output-style compressed
If you recompile the unmodified file
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 retaining the original format after compilation. Other values ​​include: nested,
:compact and compressed. After entering the production stage, it must be changed to :compressed mode.
output_style = :compressed
You can also intelligently determine the compilation mode by specifying the environment value (: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 command

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

compass’s module

compass adopts a module structure. Different modules provide different functions, and there are 5 built-in modules.
reset css3 layout typography unilities

reset module

Before writing your own styles, it is necessary to reset the browser's default styles.
The writing method is:
@import "compass/reset"
The above @import command is used to specify the loading module, here it is to load the reset module. After compilation, the corresponding css reset code will be generated.

CSS3 module
This module provides 24 css3 commands. For example:
The way to write rounded corners (border-radius),
@import "compass/css3";
.rounded {
@include border-radius(5px);
　}
The @include command above means calling a mixin (similar to a macro in C language). 5px is a 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 only need The upper left corner is rounded, written as
@include border-corner-radius(top, left, 5px);

layout module
This module provides layout functions,
For example, specify the page The footer section appears at the bottom of the browser.
@import "compass/layout";
#footer {
@include sticky-footer(54px);
}
Specifies that the child element takes up the space of the parent element:

@import "compass/layout";
#stretch-full {
@include stretch;
}
typography module
This module provides template functions
For example, specify the link color The mixin is:
link-colors($normal, $hover, $active, $visited, $focus);
When used, it is written as:
@import "compass/typography";
a {
　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}

utilities module

This module provides some functions of 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
Another example, inline-image() can convert the image into data protocol data.

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

After compilation, we get
.icon { background -image: url('data:image/png;base64,iBROR...QmCC');}
The main difference between function and mixin is that there is no need to use the @include command and can be called directly.

For more Sass and Compass - to review related articles, please pay attention to the PHP Chinese website!