First entry Web knowledge point (vii)

Less
An extension technique based on CSS, which introduces variables, mixes, operations, functions, simplifies the code of CSS, reduces maintenance costs, and must pass the parser (Koloa).
Step * * *
① new Folder
②.html file. Less file
③ starting the Koloa configuration path
④ Enter less file refresh Koloa
⑤ automatically generates a. css file (do not close the Koloa software during the write process)
⑥html introduced file is Koloa parsing out of the CSS file

* *
① variable: @ variable name: value such as @ name pickup: 5px soild Red;
When used div{
border:@ name Pickup
}
② Mixing Volume: mixin

Class:. Name {declaration}
ID class: #名称 {declaration}
The above names can be taken by themselves
Element attribute: element name {declaration}
Its name cannot be a pickup, it must be an element

Such as:
. Name pick Up 1{
width:200px;
height:300px;
｝

#名字自取2 {
font-size:30px;
｝

When used: div{
. name pick up 1;
#名字自取2;
｝
* * is a mixed set of parameters: Calls multiple functions, variable values
Name Pickup 0 (@ name pick up 1;@ name pickup 2) {
width:@ name pick up 1;
height:@ name pick up 2;
｝
When used: div{
. Name Pickup 0 (width value; height value);
Color:red
｝

SASS
There are two suffix names for Chinese characters that cannot appear in the configuration path. Sass Do not use curly braces and semicolons. Scss using braces and semicolons recommended
Variable $ variable Name: value (with less usage, knowledge turns @ $)
Nested ① selectors nesting must meet the conditions of the previous layer to trigger
② Property Nesting
Mixed claim: @mixin name {}
Use: @include name;

BOOTSTRAP
960 grid Format layout:
12 columns 60px pitch per grid 20px 3 6 3 layout The three-format layout is commonly used
16 columns 40px pitch per cell 20px 3 3 6 4 layout four-format layout
24-Column 30px pitch per grid 10px
32-Column
Container: Container
Include file: CSS JS FONTS (free icon)

* * Configuration * *

①

②<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" > Web Adaptive

③<meta name= "viewport" content= "Width=device-width, Initial-scale=1.0,maximum-cale=1.0,user-scale=no" > User Disabled Zoom

④<link rel= "stylesheet" href= ". /css/bootstrap.min.css "> Introduction of Bootstarp CSS file

⑤<meta http-ea-quir= "x-ua-compatible", CONTENT=IE:EDG "> compatible IE browser to be compatible IE8 also need to add Repond.js file

⑥ Add JS file to Body

<script src= ". /js/jquery-1.11.2-min.js "></script>

<script src= ". /js/bootstrap.min.js "></script>

First entry Web knowledge point (vii)