Less and sass in CSS

One, less overview: Less is an overview of CSS, on the basis of CSS syntax, it introduces variables, Mixin (blending), arithmetic, and
Functions and other functions. Greatly simplifies the writing of CSS, and reduces the maintenance cost of CSS. Less contains a set of custom syntax and a
Parser, which defines its own style rules based on these syntaxes, which are compiled into the corresponding CSS file by the parser (Koala).

Second, Less introduction method: ① in the HTML introduced Css<link rel= "stylesheet" type= "Text/css" href= "Styles.css" >
@import "Test2.css" when additional less files need to be introduced in ②less, the suffix CSS can not be written at this time.

                  Three, Less steps ① Build folder ② HTML file and less folder ③ start Koala ④ configuration path ⑤ Enter less file--koala refresh
                                    ⑥ generate CSS file named with less name ⑦ introduce CSS file in HTML
                                    ⑧ introduced file @import "  in less. Less "variable" or " . css" immutable

                  Four, Less variable (value variable) special symbol @ notation: declaration: @ Variable Name (pickup) value  
                       1, Mixed (MIXN) (value fixed) notation: ①class attribute class:. Name (pickup) {declaration};
                                                   ②id Attribute class: #名称 (Pickup) {declaration}
                                                   ③ element Attribute class:<div>, <p>, etc. {}

2. Mixed with parameters (variable value): ①class attribute class:. Name (pickup) (parameter) {property name: parameter (fixed value)}
② attribute classes with no parameters:. Name (pickup) (parameter) {declaration}
3. Multi-parameter mixing
4. Parameter Set @aruments
Five, ①sass from the C-Set start any folder can not appear in Chinese, the construction of documents do not appear in Chinese.
②sass has two suffix names: 1,. Sass does not allow {} and commas, 2,. Scss can appear {} and comma (we add suffix name with this)

Six, ①sass writing: Declaration of the letterhead, the special symbol $,$. Variable name (pickup): value;! Default Variable Value
②sass has two types of nesting: 1, selector nesting, 2, attribute nesting Note: At-root jump out of nested
③ Mixed (mixin) Declaration: 1, parameterless @mixin (fixed notation) name () {} Note: must be a @include+ name at call
2. The parameter @mixin name $opality:50{} is called as ibid.

Seven, 960 grid format layout method:
The screen resolution is 1024x768, a layout with a width of 960px is arranged in the following ways
①12:60px pitch per grid 20px 3 6 3 format layout (most commonly used)
②16:40px pitch per cell 40px 3 3 6 4 Edition four-format layout
③24 column: 30px pitch 10px per cell (rarely used)
④32: (rarely used)
Container: Container _x. The following x represents a number, and the column, such as Container _12, represents 12 equal portions of the page

Viii. BOOTSTARP Framework: It is a framework based on the jquery package, with a three-format layout, with self-responsive

Less and sass in CSS