(1) Understanding Sass and Compass and sasscompass

(1) Understanding Sass and Compass and sasscompass
Chapter 1 Sass and Compass refresh Style Sheets

// Content Overview
// Start learning Sass and dynamic style sheets
// Use Sass to write style sheets more efficiently
// Compass Introduction
// Meet style challenges in engineering practice with Compass

1.2.1 use variables to reuse attribute values

1. Declare variables:$ Blue: #1875e7; 2 call the variable:. blue {color:$ Blue;}

1.2.2 quickly write multi-level selectors through nesting

1 ul{2     float:right;3     li {4         float:left;5         a{ color:#111; }6     }7 }

1.2.3 use a mixer to reuse a style

1@ Mixin list{2 li {3 float: left; 4 margin-right: 10px; 5} 6} 7 ul {8@ Include list; 9} 10 11 // apply the variable 12 @ mixin list ($ Spacing: 10px) {13 li {14 float: left; 15 margin-right:$ Spacing; 16} 17}

1.2.4 use selector inheritance to avoid repeated attributes

1. error {2 border: 1px # f00; 3 background: # fdd; 4} 5. bacError {6@ Extend. error; // inherit the content in the selector7 border-width: 3px; 8} 9 10 //Use placeholder selector in Selector11 Sass: 12% button-reset {// Placeholder selector;13 margin: 0; 14 padding:. 5em 1.2em; 15} 16. save {17@ Extend % button-reset; // inherit the content in the placeholder selector;18 color: white; 19} 20. delete {21@ Extend % button-reset;22 color: black; 23} 24 CSS: 25. save,. delete {26 margin: 0; 27 padding:. 5em 1.2em; 28}

1.3 What is Compass

// Compass isPowerful Sass frameworkIts design goal is to dress up the Internet smoothly and efficiently. People who use it can write a style sheet with higher maintainability;

1.4 create a Compass project

// Make sure that the Ruby environment is installed on the computer and Sass and Compass are installed.

1 $ compass create sample

1.5 Use Compass to solve real CSS Problems

// UseBuilt-in modules(Sass functions and other features are combined) to Implement CSS resetting, grid layout, table formatting, and some CSS 3 features;

1.5.1 reset to keep the style consistent

1 (1 ).@ Import "compass/reset"2 //Use Sass to introduce the command @ import to introduce the reset module of Compass;3 // The reset module isAn independent part of the Compass framework,Can be referenced in the project at will;4 // Add this line of code,The generated CSS file contains the code for CSS resetting;5 6 (2 ).@ Include reset-html57 // The output file willGenerate additional CSS rules to modify the basic style of HTML5 Elements,

1.5.2 introduce basic layout-Blueprint grid layout

1 $ compass create my_grid -- using blueprint2 // In the my_grid project created,A series of basic layout styles are added to the content of the screen. scss file;3 // you do not need to add the class name "span-*" to the HTML tag, but use the column mixer of Sass; 4@ Include column ($ sidebar-columns );5 // For details, see chapter 6;

1.5.3 add more professional zebra striped styles for tables through table guides

1 @ import "compass/utilities/tables"; 2 table {3 $ table-color: #666; // define the variable; 4 @ include table-scaffolding; // introduce the mixer;Provides the most basic style decoration; 5 @ include inner-table-borders (1px, darken ($ table-color, 40% ));//Add cell border; 6 @ include outer-table-borders (2px );//Add Table border; 7 @ include alternating-rows-and-columns ($ table-color, adjust-hue ($ table-color,-120deg), #222 );//Add a zebra striped Style; 8}

1.5.4 CSS3 attributes no need to write vendor prefix

 1 @import "compass/css3" 2 Sass: 3     .rounded { 4         @include border-radius(5px); 5     } 6 CSS: 7     .rounded { 8         -moz-border-radius: 5px; 9         -webkit-border-radius: 5px;10         -o-border-radius: 5px;11         -ms-border-radius: 5px;12         border-radius: 5px;13     }

Conclusion 1.6

// We have learned examples of CSS preprocessing and briefly introduced four key features of Sass:Variable,Selector nesting,MixerAndSelector inheritance.
// At the same time, we also learned some application of the Sass feature in the Compass framework in real-world programs, includingCSS Reset,Format Layout,Table Style ModificationAndCSS3 border rounded corner.

 

Chapter 2 Sass basic syntax

// Content Overview
// Use variables to reuse colors, lengths, and other values
// Make CSS more structured through rule nesting
// PassMulti-file organization makes styles more maintainable
// PassMixer and inheritance reuse the entire style

2.1 use variables

// Sass uses the $ symbol to identify the variable

2.1.1 variable Declaration

1 $ nav-color: # abc ;//External variables; 2 nav {3 $ width: 100px ;//Internal Variable;4 width: $ width; 5 color: $ nav-color; 6}

2.1.2 variable reference

1 //When declaring a variable, the variable value can also reference other variables;2 $ highlight-color: # abc; 3 $ highlight-border: 1px $ highlight-color solid; 4. seleted {border: $ highlight-border ;}

2.2 nested CSS rules

1 #content {2     article {3         h1 {color:#333;}4         p {margin:1em;}5     }6 }

2.2.1 Identifier of the parent Selector &

 1 Sass: 2     a { 3         color:blue; 4         &:hover {color:red;} 5     } 6 CSS: 7     a { 8         color:blue; 9     }10     a:hover {11         color:red;12     }

2.2.2 group selector nesting

1 .container {2     h1,h2,h3 {margin-bottom:2em;}3 }

2.2.3 child combination selector and same layer combination selector:>, + ,~

1 // The selector selects only the element that hits the section selector in the child element that follows the article; 2 article> section {border: 1px solid # ccc ;} 3 // select the p element followed by the header element; 4 header + p {font-size: 1.1em;} 5 // select all the article elements that follow the article; 6 article ~ Article {border: none ;}

2.2.4 nested attributes

1 nav {2 border :{//Detach attributes;3 style: solid; 4 width: 1px; 5 color: # ccc; 6} 7}

2.3 import the Sass File

// Sass@ Import rules import the relevant files when generating CSS files;
//All related styles are summarized into the same CSS file without initiating additional download requests;
//All variables and mixers defined in the imported file can be used in the import file;

2.3.1 use some Sass files

1 //The name of a local Sass file starts with an underscore (_).. In this way, Sass will not compile the file and output CSS separately during compilation, but will only use this file for import; 2@ Import "themes/night-sky ";

2.3.2 default value settings

1 //! Default: If the variable is declared with a value, use the value it declares. Otherwise, use the default value. 2 $ box-width: 400px! Default; // If the variable "$ box-width" is not assigned a value before, use "400px"; 3. box {4 width: $ box-width; 5}

2.3.3 nested Import

1 Sass: 2 _ blue-theme.scss: 3 aside {4 color: white; 5}
6. blue-theme {@ import "blue-theme"} // introduce _ blue-theme.scss file; 7 CSS: 8. blue-theme {
Aside {color: white ;}
}

2.3.4 native CSS Import

// 1.The name of the imported file ends with .css;

// 2. The name of the imported file is a URL address;

// 3. The name of the imported file is the url () value of CSS;

2.4 silent comments

// This annotation content will not appear in the generated css file

/* This annotation content will appear in the generated css file */

2.5 Mixer

1 //The mixer is defined using the @ mixin identifier;2 //This identifier is used to assign a name to a style.,In this way, you can reference this style by using "@ include ".; 3 //@ Include calls extract all styles in the mixer and place them in the place where @ include is called.; 4 Sass: 5 @ mixin rounded {6-moz-border-radius: 5px; 7-webkit-border-radius: 5px; 8 border-radius: 5px; 9} 10. notice {11 @ include rounded; 12} 13 CSS: 14. notice {15-moz-border-radius: 5px; 16-webkit-border-radius: 5px; 17 border-radius: 5px; 18}

2.5.1 when to use a mixer

1 // determine whether a set of attributes should be merged into a mixer; an empirical rule is whether a reasonable name can be created for the mixer; 2 // The Difference Between the mixer and CSS classes: 3 // 1.Class names are applied in HTML files; semantic-oriented;4 // 2.The mixer is applied in the style sheet and is displayed;

2.5.2 CSS rules in the mixer

1 // when a mixer containing CSS rules is included in a parent rule through @ include, the rule in the mixer will eventually generate nested rules in the parent rule; 2 Sass: 3 @ mixin no-bullets {4 list-style: none; 5 li {6 list-style-type: none; 7 margin-left: 0px; 8} 9} 10 ul {11 color: #333; 12 @ include no-bullets; 13} 14 CSS: 15 ul {16 color: #333; 17 list-style: none; // properties in the mixer; 18} 19 ul li {20 list-style-type: none; 21 margin-left: 0px; 22}

2.5.3 passing parameters to the mixer

 1 Sass: 2     @mixin link-colors($normal,$hover,$visited){ 3         color:$normal; 4         &:hover { color:$hover; } 5         &:visited { color:$visited; } 6     } 7     a { 8         @include link-colors(blue,red,green); 9     }10     Or11     a {12         @include link-colors(13             $normal:blue,14             $visited:green;15             $hover:red16         );17     }18 CSS:19     a { color:blue; }20     a:hover { color:red; }21     a:visited { color:green;}

2.5.4 default parameter values

1 @mixin link-colors ($normal,$hover:$normal,$visited:$normal){2     color:$normal;3     &:hover { color:$hover; }4     &:visited { color:$visited; }5 }

2.6 Use selector inheritance to streamline CSS

1 Sass: 2. error {3 border: 1px solid red; 4} 5. seriousError {6 @ extend. error ;//Inherit the content in the selector; 7 border-width: 3px; 8} 9 CSS: 10. seriousError {11 border: 1px solid red; 12 border-width: 3px; 13}

2.6.1 when to use inheritance

// Inheritance is class-based (sometimes Selector Based on other types), soInheritance should be based on semantic relationships.;

2.6.2 advanced inheritance

// If a style rule inherits a complex selector, it only inherits the style applied by the element hit by the complex selector;

2.6.3 inherited work details

1 // inheritance is not as simple as replacing the code at @ extend with CSS styles; 2 //> 1.Compared with the mixer, the generated CSS code is less inherited.; 3 //> 2.Inherit the rules that follow CSS stack; (weight and order of appearance);

2.6.4 use inheritance Best Practices

// Using inheritance will make your CSS beautiful/clean;Because inheritance only copies the selector when generating CSS, and does not copy the CSS attribute of a large segment.;

Conclusion 2.7

1 // 1. variables are the most basic tools provided by Sass; 3 //Independent CSS values can be reused through variables.; Whether it is in a separate rule range or in the whole style sheet; 5 // variable/mixer naming or even Sass file names can be exchanged with common "_" and "-"; 6 7 // 2.Nesting allows CSS rules to be nested in CSS rulesTo reduce repeated Writing of commonly used selectors and make the structure of the style sheet clearer. 9 // a special parent selector identifier "&" is provided to construct more efficient nesting; 10 11 // 3.Style import allows you to merge the content scattered in multiple Sass files into a generated CSS file.To avoid performance problems caused by a large number of CSS files in the project through the native CSS @ import; 12 13 // 4. the mixer allows users to write semantic styles while avoiding duplication of visual styles. 14 // 5. inheritance allows you to declare semantic relationships between classes. These relationships can maintain the cleanliness and maintainability of CSS;