Compass Module----Utilities

Introduction of Utilities:

@import "Compass/utilities";

Introduced separately:

@import "Compass/utilities/color";

Color: Collection of colors-related tools
1.Color brightness is used to calculate the brightness of a value

1 @debug Brightness (#000); 2 @debug Brightness (#ccc); 3 @debug Brightness (#fff);

Outputs the brightness of the color in the command line.
2.Color contrast
contrasted mixin automatically generates the Background-color attribute based on the color value of the background color we pass in, with the default dark and light values set to our color property, which is larger than our background color. In order to make the text more emergent in the current context.

General: A common set of generic classes (e.g., cross-browser float, clear float, etc.)

Clearfix: Clear float

Print: A collection of printing control tools
introduction of the Print module :

@import "Compass/utilities/print";

We have to work together in two files ,print.scss,print.scss also need to introduce the print module. Call Print-utilities mixin in Print.scss.
Also call print-utilities mixinin screen.scss (when calling, you need to pass a media parameter, specified as screen, do not pass the default to print):

@include print-utilities (screen);

Sprites: Sprite Graph-related tools collection (using Compass's heavy weight)

Tables: Table-style related tools collection
1.table Borders: Used to add border to table. Two mixin, one modifier outer border, one modifier cell border
2.Table Scaffolding: Table Scaffolding, alignment of cell text and initialization of padding
3.Table Striping: Different color decorations for odd and even rows, color decoration for separated columns
alternating-rows-and-columns ($even-row-color, $odd-row-color, $dark-intersection, $header-color, $ Footer-color):
first parameter: The color of even rows
second parameter: The color of an odd line
The third parameter: The color difference of the interval column (in order to highlight the difference between two adjacent columns, two adjacent columns, every other column we will lose a color difference on the basis of their original color)
Fourth parameter: Header part color value (refers to th tag) does not set default to white
Fifth parameter: Footer part of color value, not set default to white
Example:

1 <Tableclass= "Goods-price"cellspacing= "0">2     <thead>3         <TRclass= "odd">4             <th>Fruit Category</th>5             <th>Orange</th>6             <th>Apple</th>7             <th>Pear</th>8             <th>Banana</th>9             <th>Packaged</th>Ten         </TR> One     </thead> A     <tbody> -         <TRclass= "even"> -             <th>Price</th> the             <TDclass= "Numeric">1</TD> -             <TDclass= "Numeric">2</TD> -             <TDclass= "Numeric">3</TD> -             <TDclass= "Numeric">4</TD> +             <TDclass= "Numeric">10</TD> -         </TR> +         <TRclass= "odd"> A             <th>Ten</th> at             <TDclass= "Numeric">10</TD> -             <TDclass= "Numeric">20</TD> -             <TDclass= "Numeric">30</TD> -             <TDclass= "Numeric">40</TD> -             <TDclass= "Numeric">100</TD> -         </TR> in     </tbody> -     <tfoot> to         <TRclass= "even"> +             <th>Total</th> -             <TDclass= "Numeric">11</TD> the             <TDclass= "Numeric">22</TD> *             <TDclass= "Numeric">33</TD> $             <TDclass= "Numeric">44</TD>Panax Notoginseng             <TDclass= "Numeric">110</TD> -         </TR>  the     </tfoot> + </Table>

SASS:

1 . Goods-price {2    $table-color: #7a98c6;  3    @include outer-table-borders (); 4     @include inner-table-borders (1px, Darken ($table-color, 40%)); 5     @include table-scaffolding (); 6     @include alternating-rows-and-columns ($table-color,adjust-hue ($table-color,-120deg), #222222); 7 }

Compass Module----Utilities