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

Source: Internet
Author: User

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 }

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.