(2) Use Sass, Compass, and sasscompass in practice

(2) Use Sass, Compass, and sasscompass in practice
Chapter 3 CSS grid layout without computation 3.1 Introduction to grid layout 3.2 use of grid layout 3.2.1 terminology

1. Term name: determines whether HTML tags are involved. 2 columns of content measurement. Vertical unit. No. 3. HTML elements in a grid layout are the columns in a 4-cell grid layout.

3.2.3 fixed grid layout or flow grid layout

1 // because the screen sizes of network users are different, the designer has two options: 2 // 1. either choose a reasonable fixed layout size for most users (and limit the content in this layout to not overflow); 3 // 2. either implement a flexibleFlow LayoutTo make the content adaptive to the user's screen, and even when the browser window size changes;

3.3 Use Blueprint

1 // Blueprint pack some general CSS technologies for grid layout/section and table style modification into oneFrameworkAnd then you can use this framework in each project. 2 // install Blueprint3 C: \ Users \ DELL>Gem install compass-blueprint

3.3.2 use the Compass application Blueprint

1 // create a basic Blueprint project 2 C: \ Users \ DELL>Compass create simple -- using blueprint/basic3 directory simple/4 directory simple/images/5 directory simple/sass/6 directory simple/sass/partials/7 directory simple/stylesheets/8 create simple/config. rb 9 create simple/sass/screen. scss10 create simple/sass/partials/_ base. scss11 create simple/sass/print. scss12 create simple/sass/ie. scss13 create simple/images/grid.png 14 write simple/stylesheets/ie.css 15 write simple/stylesheets/print.css 16 write simple/stylesheets/screen.css 17 18 // on screen. scss file generation contains too many temporary errors: 19 // This import applies a global reset to any page that imports this stylesheet.20 @ import "blueprint/reset "; // default Blueprint reset module; 21 22 // To configure blueprint, edit the partials/_ base. sass file.23 @ import "partials/base ";//Grid layout settings; 24 25 // Import all the default blueprint modules so that we can access their mixins.26 @ import "blueprint"; // make the Blueprint module available; 27 28 // Import the non-default scaffolding module.29 @ import "blueprint/scaffolding ";//Introducing scaffolding; 30 31 // Generate the blueprint framework according to your configuration: 32 @ include blueprint ;//Generate grid layout; 33 34 @ include blueprint-scaffolding ;//Form and other Blueprint components;

3.3.3 use the Compass application without the need for Blueprint with the class name

 1 C:\Users\DELL>compass create simple --using blueprint/semantic 2  3 Sass: 4     #container { 5         @include container; 6     } 7 CSS: 8     #container { 9       width: 950px;10       margin: 0 auto;11       overflow: hidden;12       *zoom: 1;13     }

3.4 use the 960 grid layout system

1 // install the 960 system; 2 C: \ Users \ DELL>Gem install compass-960-plugin3 4 // create a 960 grid system Compass project 5 C: \ Users \ DELL>Compass create-r ninesixty twelve_col -- using 9606 directory twelve_col/7 directory twelve_col/sass/8 directory twelve_col/stylesheets/9 create twelve_col/config. rb10 create twelve_col/sass/grid. scss11 create twelve_col/sass/text. scss12 write twelve_col/stylesheets/grid.css 13 write twelve_col/stylesheets/text.css

3.5 use Compass to process vertical rhythm

1 @ import "compass/typography ";//Introduce paragraph Module; 2 $ base-font-size: 16px; // declare the font size; 3 $ base-line-height: 24px; 4@ Include establish-baseline;5 h1 {@ include adjust-font-size-to (48px );}

3.5.2 front and back

1 //The leader mixer adds a baseline unit margin before the element; 2 //The trailer mixer adds a baseline unit margin behind the element;3 p {@ include leader; @ include trailer;} 4 Sass: 5 p {6 @ include leader; 7 @ include trailer; 8} 9 CSS: 10 p {11 margin-top: 1.5em; 12 margin-bottom: 1.5em; 13}

Conclusion 3.6

1 // how to simplify the maintenance of white space and quickly build a prototype design for the popular CSS grid framework; 2 // by adding some CSS classes, you can create vertical columns with uniform spacing between each other;

 

Chapter 4 Compass is no longer boring

// UseCompass resets the default browser Style;

// Compass helper for improving style table layout;

// Use Compass to create sticky footers/diversified tables and floating;

4.1.1 global style reset-global-reset4.1.2 for more control through targeted style Reset

1 @ import "compass/reset/utilities"; 2> 1.HTML5 style reset -- @ include reset-html53> 2. Reset more styles in the Compass document 4> 1.Reset-box-Model: removes the padding and border of an element.; 5> 2.Reset-Font: resets the font size and baseline of text.; 6> 3.Reset-Focus: remove the outline provided by the browser; 7> 4.Reset-table and reset-table-Cell: resets the border and alignment of a table.; 8> 5.Reset-quotation: add the double quotation marks that exist only in the style sheet for <blockquotes>.;

4.2 faster and more intuitive typographical auxiliary tool 4.2.1 link auxiliary tool

1> 1.Link color; 2 a {@ includeLink-colors(#333, # 00f, # f00, #555, # f00);} 3> 2.Set the hover style (underline) through hover-link );4 a {@ includeHover-Link} 5> 3.Use unstyled-link to set hidden links (remove color, cursor style, and underline );6 p. secret a {@ include unstyled-link}

4.2.2 list auxiliary tools-create various lists

1> 1.Use pretty-Bullets decoration list(Use the project symbol in the background image to display the list) 2 ul. features {3 @ includePretty-bullets('pretty-bullet.png ');4} 5> 2. Remove the project symbol 6 li. no-bullet {through no-bullet and no-bullets {@ Include no-bullet}//Remove the no-bullet symbol of the li class;7 ul. no-bullet {@ Include no-bullets}//Remove the project symbol from the entire list;8> 3. easily arrange horizontally 9 // the horizontal-list mixer has two parameters: $ padding (padding) and $ direction (floating direction); 10 ul. nav {@ includeHorizontal-List} 11 ul. nav {@ includeHorizontal-List (7px, right)} // List horizontal arrangement; 12> 4. Use inline-list to process inline list 13 ul. words {@ includeDelimited-list}//Set the list to an inline style;14 ul. words {@ includeDelimited-list ("! ")}//Custom Separator;

4.2.3 text auxiliary tools-using auxiliary tools to conquer text

1>1. Use ellipsis to represent content Truncation(Text-overflow: ellipsis); 2 td. dot {@ Include ellipsis;} 3>2. Use nowrap to prevent text line breaks4 td {@ Include nowrap} 5> 3. Replace the image with replace-text6 h1.coffee {@ Include replace-text ("coffee-header.png ")}

4.3 layout auxiliary tool 4.3.1 sticky footer

// Generate a footer with a height of 40 PX, always at the bottom;

1 @include sticky-footer { 40px, "#content", "#footer", "#sticky-footer"};

4.3.2 extensible Elements

// The element is absolutely located at a distance of 5 px from the boundary;

1 // The stretch mixer has four parameters: $ offset-top/$ offset-right/$ offset-bottom/$ offset-left; 2. logo {@ include stretch (5px, 5px, 5px, 5px )}

Conclusion 4.4

// This chapter describes Compass tools that save time and effort;

// Including: Link/LIST/text/layout;

 

Chapter 5 Use CSS3 through Compass

// Use the CSS3 module of Compass to create a cross-browser CSS3 style sheet

// Some CSS3 features are supported in earlier version IE

// CSS3 advanced skills in Compass

5.1 new property: browser prefix

1 // introduce CSS3 module 2@ Import "compass/css3 ";3 Sass: 4. notice {5 @ include border-radius (5px); 6} 7 CSS: 8. notice {9-moz-border-radius: 5px; 10-webkit-border-radius: 5px; 11 border-radius: 5px; 12}

5.2 use CSS35.2.1 rounded corners through Compass

1 button.rounded {2     @include border-radius (5px);3 }

5.2.2 CSS3 shadow -- text-shadow and box-shadow

 1 Sass: 2     $shadow-1:rgba(#000,.5) -200px 0 0; 3     $shadow-2:rgba(#000,.3) -400px 0 0; 4     h2 { 5         @include box-shadow($shadow-1); 6         @include text-shadow($shadow-1,$shadow-2); 7     } 8 CSS: 9     h2 {10       -moz-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;11       -webkit-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;12       box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;13       text-shadow: rgba(0, 0, 0, 0.5) -200px 0 0, rgba(0, 0, 0, 0.3) -400px 0 0;14     }

5.2.3 color gradient

 1 #pattern { 2     @include background( 3         linear-gradient( 4             360deg, 5             #bfbfbf 0%, 6             #bfbfbf 12.5% 7             #bfbf00 12.5%, 8             #bfbf00 25%, 9             ...10         )11     );12     width:400px;13     height:300px;14 }

5.2.4 use @ font-face to embed a font

1 @include font-face ("ChunkFiveRegular",2     font-files("ChunkFiveRegular-webfont.woff",woff,3                "ChunkFiveRegular-webfont.woff",ttf, 4                "ChunkFiveRegular-webfont.woff",svg,5                "ChunkFiveRegular-webfont.woff",normal,normal));

Conclusion 5.4

// Use the CSS3 mixer for implementation:Rounded corner/Shadow/GradientAndText Import;