Compass Module----Utilities

Source: Internet
Author: User

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

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>


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

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: 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.