The compass module. The path of the compass import module.

The compass module. The path of the compass import module.

 

Compass Core Module
Reset: resets the CSS module.

 @import "compass/reset"

Layout: Control of page Layout

@import "compass/layout"

Only these two modules need to be explicitly specified for introduction
@ Import "compass" includes five other modules by default, but does not include resrt or layout.

Four other functional modules and Browser support Module
CSS3: cross-browser CSS3 capabilities
Helpers: contains a series of functions, which are similar to the SASS function list and are rarely used. The functions are indeed rich and powerful.
Typography: describe our text style, vertical rhythm
Utilities: there is no way to put the content of other modules into this module. Auxiliary tool modules, helpers are all functions, utilities are mostly mixin
Browser: Configure which browsers are supported by compass by default. Which version is supported by a specific browser by default. One modification affects the output of the six modules. Different browsers make different adaptation.

 

 

Overview of Compass core modules & Reset modules

Install the compass-normalize plug-in command:

gem install compass-normalize

Introduce the compass-normalize plug-in
In the config. rb file:

require 'compass-normalize'

Extension:
In the config. rb fileImport-onceAfter multiple @ import operations are performed on the same file, compass inserts the imported question file only once. If an imported file must be introduced twice, you can add an exclamation point after the file name! To inform compass that we need to introduce it again. @ Import "compass/reset! "

Reference normalize in the SCSS File

@import "normalize";

Normalize core module:
Base: Used to unify the font, text size adjustment, margins, and so on of HTML and body labels.
Html5: Unified display of new elements in html5
Links: unifies the style modification of the tab, removing the edges during hover and active.
Typography: unified style modification of section text such as B, strong, sub, and sup.
Embeds: unified style modification of labels such as img and svg (for example, the border of uniform img labels is 0)
Groups: unified style of figure, pre, code, and other labels
Forms: unified form-related button, input, and other tag styles
Tables: unifies the table-related table, td, th, and other label styles.

Introduction (via sub-path ):

@ Import "normalize-version" // -- before introducing a subclass, You need to introduce normalize-version @ import "normalize/base"

@ Import "compass/reset/untlities"; ...... introduce theseMixin.

@ Import "compass/reset"; it is actually introducedCompass/reset/untlitiesAnd then calls a global-reset (); mixin set.

@import "compass/reset/untlities";include global-reset();

Reset Utilities core mixin
Http://compass-style.org/reference/compass/reset/utilities/
Nested-reset: only used to reset all elements under a selector on our page.
For exampleReset-secAll elements:

.reset-sec{    @include nested-reset;}

 

 

 

 

Layout module (the module with the lowest usage)
Further subdivided under the layout moduleThree cores mixinModule, which can be introduced separately.

1 @import "compass/layout";2 @import "compass/layout/grid-background";3 @import "compass/layout/sticky-footer";4 @import "compass/layout/stretching";

Stretching module, stretching elements by parent element size, For example:

1. stretch-full {2 @ include stretch (); 3} 4. stretch-full2 {5 @ include stretch (5px, 0px, 5px, 5px); // The unit of non-0 px cannot save 6} 7. the stretch-full3 {8 @ include stretch ($ offset-top: 5px, $ offset-right: 0px, $ offset-bottom: 5px, $ offset-left: 5px ); // The parameter sequence is variable. The unit of non-0 values (px) cannot save 9}

Code after sass conversion:

 1 .stretch-full { 2     position: absolute; 3     top: 0; 4     bottom: 0; 5     left: 0; 6     right: 0; 7 } 8 .stretch-full2 { 9     position: absolute;10     top: 5px;11     bottom: 0;12     left: 5px; right: 5px;13 }14 .stretch-full3 {15     position: absolute; 16     top: 5px;17     bottom: 5px;18     left: 5px; right: 0px;19 }

Sticky-footer ModuleTo provide the footer total solution at the bottom of the page, which requires a fixed structure:

1 <body>2     <div id="root">3         <div id="root_footer"></div>4     </div>5     <div id="footer">6         Footer content goes here.7     </div>8 </body>

@ Include sticky-footer (54px) // The parameter is footer height @ include sticky-footer (54px, "# my-root", "# my-root-footer ", "# my-footer") // custom Selector

 

 

 

 

CSS3 module & Browser Support module (modules with High Active usage)
When using the CSS3 module, you must adjust the configuration of the Browser Support module, even if you do not manually adjust CSS3, the Browser Support module is introduced. The CSS3 module is mainly used for cross-browsing CSS3 capabilities.
Example:

1 @import "compass/css3";2 .webdome-sec{3     @include box-shadow(1px 1px 3px 2px #cfcecf);4 }

Generated code:

1 .webdemo-sec {2     -moz-box-shadow: 1px 1px 3px 2px #cfcedf;3     -webkit-box-shadow: 1px 1px 3px 2px #cfcedf;4     box-shadow: 1px 1px 3px 2px #cfcedf;5 }

If you do not need to automatically generate the Firefox adaptation code, you need to use the Browser Support module. To configure which browsers are supported by compass by default. Which version is supported by a specific browser. Browser Support Module 1, but modification will affect the output of the other six modules.
Introduce support:

@import "compass/support";

Introducing the CSS3 module is equivalent to indirectly introducing the support module.
View the supported browser versions:

Console command:

1 compass interactive // enter a console 2 browsers () used to test SassScript in Compass // view supported browsers 3 browser-versions (chrome) // view supported chrome versions

Enter@ Debug browsers ()The console also prints the supported browsers.
Set the browsers supported by compass:

@import "compass/css3";$supported-browsers: chrome firefox;

You can also enter $ supported-browsers: chrome and firefox. the browser queue can be separated by spaces or commas.

Set the minimum version of the browser supported by compass (compass supports ie5.5 by default ):

$browser-minimum-versions:("ie":"8","":"")

If this parameter is not set, the return version of browsers-versions is supported by default.
Animation: CSS3 Animation-related features.
Appearance: The appearance attribute of CSS3, which is newly defined in the new CSS3 specification. (No mainstream browser supports this attribute)
Background Clip,Background Origin,Background Size: Background-related attributes added in CSS3, which are used to specify the area of the background, the origin of the background image, and the size of the background image.
Border Radius: Border rounded corner attribute
Box,Box Shadow
Box Sizing: Used to modify the width and height of the box model.
CSS Regions: A new way to control content Layout
CSS3 Pie: Improve the CSS 3 rendering function of IE as much as possible
Columns: CSS3 multi-column layout attributes
Filter: It is mainly used to implement some special effects on images.
Flexbox(Mobile web development is usually used)
Font Face: Specifies a downloaded font instead of the font installed on your computer.
Hyphenation: How to break line breaks
Images: CSS3 adds this method for generating gradient images. images is used to use these two methods to act as images.
Inline Block: Cross-browser display: inline-block;
Opacity: Transparent attribute. To be compatible with earlier IE versions
Selection: Use the selection pseudo element of CSS3 to define the color and background color of the selected text.
Shared Utilities: The compass plug-in related to the CSS3 module will be used. Tool module
Text Shadow: Text shadow Property
Transform,Transition: Changing animation attributes
User Interface: Restrict whether to allow drag and drop selection for a certain area. The style of the input element in the prompt language is not filled.

 

 

 

Typography Module
There are four modules:
Links: remove the underline when the link modifier module is normal. The underline hover-link () is displayed only when the hover is used ();

1 a{2     @include hover-link();3 }

After compilation:

1 a {2     text-decoration: none;3 }4 a:hover, a:focus {5     text-decoration: underline;6 }

Modify the hyperlink color in different StatesLink-colors
Flat the hyperlink style, which is similar to the text of the parent container.Unstyled Link

Lists: List modifier Module

Text: Text modifier Module

Vertical Rhythm: Vertical Rhythm modifier Module

@import "compass/typography/vertical_rhythm";