Compass module ---- Utilities, ---- utilities

Compass module ---- Utilities, ---- utilities

Introduce Utilities:

@import "compass/utilities";

Introduction:

@import "compass/utilities/color";

 

 

Color: a set of Color-related tools
1. Color Brightness is used to calculate a value.Brightness

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

Output the brightness of the color on the command line.
2. Color Contrast
Contrasted mixin automatically generates the background-color Attribute Based on the color value of the background color, at the same time, in the default dark and light color values, select a color attribute with a high degree of background color, in order to make the text appear better in the current background.

General: a set of General classes (for example, cross-browser float, clear floating, etc)

Clearfix: Clear floating

Print: a collection of Print control tools
Import print Module:

@import "compass/utilities/print";

We must use these two files together. print. scss and print. scss also need to introduce the print module. Call print-utilities mixin in print. scss.
Print-utilities mixin must also be called in screen. scss (a media parameter needs to be passed during the call, specified as screen, and the default value is print if not passed ):

@include print-utilities(screen);

 

 

Sprites: A set of tools related to sprite charts (the top priority of using compass)

 

 

Tables: Table Style-related tool set
1. Table Borders: Used to add a border to a table. Two mixins, one for the outer border and one for the border between cells
2. Table Scaffolding: table scaffold for cell text alignment and padding Initialization
3. Table Striping: perform different color modifications on the parity rows and color modifications on the separated columns.
Alternating-rows-and-columns ($ even-row-color, $ odd-row-color, $ dark-intersection, $ header-color, $ footer-color):
Parameter 1: Color of an even row
The second parameter is the color of the odd line.
Third parameter: the color difference of the spacing column (to highlight the difference between the two adjacent columns, we will remove a color difference between the two adjacent columns based on their original colors)
Fourth parameter: The color value (the th tag) of the header is not set to white by default.
Fifth parameter: The color value of the footer part. If this parameter is not set, the color is white by default.
Example:

1 <table class = "goods-price" cellspacing = "0"> 2 <thead> 3 <tr class = "odd"> 4 <th> fruit </th> 5 <th> orange </th> 6 <th> Apple </th> 7 <th> pear </th> 8 <th> bananas </th> 9 <th> packed </th> 10 </tr> 11 </thead> 12 <tbody> 13 <tr class = "even"> 14 <th> unit price </th> 15 <td class = "numeric"> 1 </td> 16 <td class = "numeric"> 2 </td> 17 <td class = "numeric"> 3 </td> 18 <td class = "numeric"> 4 </td> 19 <td class = "numeric"> 10 </td> 20 </tr> 21 <tr class = "odd"> 22 <th> 10 </th> 23 <td class = "numeric"> 10 </td> 24 <td class = "numeric"> 20 </td> 25 <td class = "numeric"> 30 </td> 26 <td class = "numeric"> 40 </td> 27 <td class = "numeric"> 100 </td> 28 </tr> 29 </tbody> 30 <tfoot> 31 <tr class = "even"> 32 <th> total </th> 33 <td class = "numeric"> 11 </td> 34 <td class = "numeric"> 22 </td> 35 <td class = "numeric"> 33 </td> 36 <td class =" numeric "> 44 </td> 37 <td class =" numeric "> 110 </td> 38 </tr> 39 </tfoot> 40 </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 }