A, less foundation
1.1, less opening
1. What is CSS preprocessor?
CSS preprocessor is to use a language used to increase the number of CSS characteristics of dynamic languages (variable, function, inheritance, dynamic language is .js.)
CSS preprocessor can make your CSS more concise, more adaptable, more intuitive, and many other benefits of code
In short: CSS preprocessor is an upgraded version of CSS
2. Common CSS preprocessor
Less、Sass、Stylus
3. Why do we need less (CSS disadvantages)?
3.1, CSS syntax is simple, but it also brings some problems (for example: reading bad reading css code can not see the relationship between elements)
3.2, CSS need to write a lot of code that seemed to have no logic, convenient maintenance and expansion, is not conducive to reuse,
3.3, resulting from the nature of these reasons CSS is a non-procedural language, no concept of variables / functions / scope, etc.
4. What is less (Leaner Style Sheets)?
4.1, Less is a CSS preprocessor language, CSS is given the characteristics of dynamic languages.
4.2, which extends the CSS language, increasing the characteristic variable, Mixin (mixed), nested, function and operation, so that CSS easier to maintain and extend
4.3, in a word: a similar syntax to write CSS JS
5.less basic use:
5.1, less can be run in node.js environment
5.2, less can be run directly in the browser
(A), a browser running mode
Write less file (<style type = "text / less"> </ style>) -> the introduction of less file -> introduced less.js (http://lesscss.cn/ less Chinese website) -> Run
<link rel="stylesheet/less" href="css/index.less">
<script src="js/less.min.js"></script>
important point:
Be sure to introduce less.css reintroduction less.js. Otherwise, no effect
Less.css wording is introduced <link rel = "stylesheet / less" href = "css / index.less">. Be sure to add "/ less" in the rel
If less code written in a separate file, be sure to take effect in the server environment (that is, open webstrom in the server environment) in order to run. If you open an HTML directly open, it will be invalid.
This usage problems exist:
Because when it is running only be processed for .less files less.js, so when running processing will produce performance problems.
1.2, less second use
(B), running in a browser way:
Advance precompiled
Write less File -> Tools converted to use css file -> introduced css file
<link rel="stylesheet" href="css/index.css">
Css file conversion tool to commonly used methods:
1. Koala Client: http://koala-app.com/index-zh.html(win installed, do not modify the path)
Use as follows:
Click the "+" sign to select the folder where the file .less
Select the file .less
Click the "Compile" button to start converting the files to .less .css file.
After the emergence of "success" prompt, click on the "Refresh" button below .less compiler will appear .css file conversion was successful
2. Open Source China: https://tool.oschina.net/less (online conversion sites)
3. Build loader configuration tool automatically compiles: follow-up course content
important point:
Without introducing less.js, without running on the server
1.3, less in the comments
JS less in the comments and the comments, there are also single-line and multi-line comments
less in single-line and multi-line comments biggest difference is: Will be compiled
Single-line comments can not be compiled (does not appear in the compiled CSS file)
Multi-line comments will be compiled (CSS file will appear in the compiled)
1.4, less variable in
1. What is a variable?
And in essentially the same concept js
2.less defined variable format:
@ Variable name: value;
@h: 200px;
3.less used in variable format
@ Variable name;
height: @h;
4. JS and as it may be a variable to another variable
@ Variable name: @ variable name;
5. js and less variables as there are global variables and local variables
Can be used in the definition of {} is outside the global variable, where
{} Which is defined in the local variable is only used in {}
important point:
The variable delay is less loaded, write back can also be used in front of
6. js and, like, different scope of the variables do not affect each other, only the same scope of variables will influence each other
And js as when accessing variables using the principle of proximity (variable also follow the principle of proximity, some with their own, they did not find out.)
1.5, less variable interpolation
Note: Enterprise development is rarely used
Attribute name tag name you want to use variables, you must use variable interpolation mode
What is a variable interpolation
In the less the value of the property can be used directly, if variable, but if the selected attribute name or variable name and can not be used directly
If the attribute name or select the name you want to use saved variable values, you must use variable interpolation format
Variable interpolation format
Format: @ variable name} {
1.6, less of the operational
method one:
div{ width: 200px; height: 200px; background: salmon; position: absolute; left: 50%; margin-left: -100px; }
Disadvantages: not suitable for coding a way, because we need their own port operator half the width of the element is.
Method Two:
div{ width: 200px; height: 200px; background: salmon; position: absolute; left: 50%; transform: translateX(-50%); }
Disadvantages: Second way is not conducive compatible, because the new CSS3 transform property is only supported browser C3 attributes can be used.
Method three:
In a new in CSS3 calc function can be simply realized +, -, *, / operations.
div{ width: 200px; height: 200px; background: salmon; position: absolute; left: 50%; margin-left: calc(-200px / 2);; }
But the disadvantage: with the same method two transform, there are compatibility issues
Method four:
The above method has drawbacks, but less of the operation there is no malpractice. less use
- less in operation and in the new CSS3 calc function as support: +, -, *, /
- But to write clearly calculation results in the calculation process units, which are written in the dividend or two can write
div{ width: 200px; height: 200px; background: salmon; position: absolute; left: 50%; margin-left: (-200px / 2); }
1.7, less in the mix
1. What is the mix less (Min in)?
Code will be reused encapsulated into a class where the need to call the packaged class
When pretreated less automatically encapsulated class code used copied
Essentially ctrl + c -> ctrl +
The 2.less attention points:
If there is no back mixing name (), then at the time of the pretreatment, the code will remain mixed.
If the back mixing name plus (), then at the time of the pretreatment, the mixed code is not retained.
/*.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}*/
.center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.son{
width: 200px;
height: 200px;
background: salmon;
.center; // mix
}
1.8, less with the mixing parameters
This is mixed with parameters
whc(@w, @h, @c){
width: @w;
height: @h;
background: @c;
This is mixed with the parameters, and with default values
.whc(@w:100px, @h:200px, @c:pink){
width: @w;
height: @h;
background: @c;
.box1 {
/* width: 200px;
height: 200px;
background: salmon;*/
//.whc(200px, 200px, salmon); // this is mixed with parameters
// This is passed to the specified data in the form of mixing parameters
.whc(@c:salmon);
}
1.9, less mixed variable parameters
Variable parameters: "..." is a variable parameter represents zero or more parameters
div{
width: 200px;
height: 200px;
background: skyblue;
//transition: all 4s linear 0s;
.animate(all, 4s, linear, 0s);
}
.animate(@name, @time, @mode, @delay){
//transition: @name @time @mode @delay;
transition: @arguments;
}
The @arguments js less and in the same arguments may be passed in the get all the parameter
less the "..." denotes zero or more acceptable parameters
If the parameter list "...", then "..." must be written at the end of the parameter list
.animate (...) {// "..." it is the variable parameter represents zero or more parameters
transition: @arguments; // transition parameters need to pass at least two
}
.animate (@name, @time, ...) {// "..." is the variable parameter represents zero or more parameters
transition: @arguments; // transition need to pass at least two parameters, or koala will complain
}
1.10, less mixing mode matches
If mixing name defined in the same, it will cover the definition defined earlier. In order not to be covered. Generates a matching pattern (that is, by mixing the first string parameter, to determine which particular mix of the same name to be executed)
Format matching mode: the front () to name a custom
.triangle (Down, @width, @color) {// matching pattern
width: 0;
height: 0;
border-width: @width;
//border-color: #000 #f00 #0f0 #00f;
border-color: @color transparent transparent transparent;
border-style: solid solid solid solid;
}
.triangle(Top, @width, @color){
width: 0;
height: 0;
border-width: @width;
//border-color: #000 #f00 #0f0 #00f;
border-color: transparent transparent @color transparent;
border-style: solid solid solid solid;
}
div{
//.triangle(Top, 80px, green)
.triangle(Right, 80px, green)
}
1.11, less common mixing mode matches
_: Indicates the general pattern matching,
General match mode:
After mixing, whether the same name which were matched, the first execution of the code will be common mode matching, pattern matching is performed general, then perform mixing
General effect pattern matching: Code Optimization
.triangle(@_, @width, @color){
width: 0;
height: 0;
border-style: solid solid solid solid;
}
.triangle(Down, @width, @color){
//width: 0;
//height: 0;
border-width: @width;
border-color: @color transparent transparent transparent;
//border-style: solid solid solid solid;
}
div{
//.triangle(Down, 80px, green)
.triangle(Right, 80px, green)
}
1.12, less import other file documents less
Write code to party in less file header, both methods can be
@import "triandgle";
@import "triandgle.less";
1.13, less the built-in functions
As the underlying less is implemented in JavaScript, so JavaScript to some common functions are supported in the less
1. Hybrid Method
image-size("file.jpg"); // => 100px 50px
image-width("file.jpg"); // => 100px
image-height("file.jpg"); // => 50px
2. Unit Conversion
convert(9s, "ms"); // => 9000ms
convert(14cm, mm); // => 140mm
convert(8, mm); // => 8
3. List
@list: "A", "B", C, "D";
length(@list); // => 4
extract(@list, 3); // => C
4. Mathematical Methods
ceil (2.1) // rounding up
floor (2.1) // rounded down
percentage (.3) // 30% the percentage of transfected
round (1.67, 1) // 1.7 rounded to one decimal place
sqrt (25cm) // 5cm squared
abs (-5cm) // 5cm absolute value
pi (); // pi π
max(3px, 42px, 1px, 16px) //42px
min (3px, 42px, 1px, 16px) // 1px
The string replacement
replace("Hi Tom?", "Tom", "Jack") //Hi Jack
6. Analyzing type
isnumber (56px); // => true whether or not containing digital
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
iskeyword(keyword); // => true
isurl(url(...)); // => true
ispixel(56px); // => true
isem(7.8em); // => true
ispercentage(7.8%); // => true
isunit (4rem, rem); // => true whether the specified unit
isruleset (@rules); // => true whether the variable
7. Color Operation
Increase the saturation
saturate(color, 20%)
Desaturate
desaturate(color, 20%)
Increase brightness
lighten(color, 20%)
Decrease brightness
darken(color, 20%)
Reduce transparency
fadein(color, 10%)
Increase transparency
fadeout(color, 10%)
Set absolute opacity (overwriting the original transparency)
fade(color, 20%)
Hue angle of rotation
spin(color, 10)
Mixing the two colors, opacity included in the calculation.
mix(#f00, #00f, 50%)
Mixed with white
tint(#007fff, 50%)
Mixed with black
shade(#007fff, 50%)
Gray, saturation removed
greyscale(color)
Returns the maximum contrast color
contrast(color1, color2)
8. Color mixing
Each RGB channel is multiplied and then divided by 255
multiply(color1, color2);
In contrast with multiply
screen(color1, color2);
To make it lighter or darker
overlay(color1, color2)
Avoid too bright or too dark
softlight(color1, color2)
And overlay the same, but the color swap
hardlight (color1, color2)
(RGB) average of two colors based on the calculation of each channel
average(color1, color2)
Many, remaining queries LESS Manual
@str: "../images/1.jpg";
@ Str2: replace (@str, "1", "2"); // built-in function of the string 1 to 2
div{
width: 200px;
height: 200px;
//background: url(@str2);
background: desaturate (yellow, 50%); // desaturate built-in function, reducing the color saturation
}
div:hover{
background: saturate (yellow, 50%); // saturate built-in function to enhance color saturation
}
1.14, less hierarchical structure of
<div class="father">
<!-- <div class="son"></div>-->
</div>
.father{
width: 300px;
height: 300px;
background: skyblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*
If {a} a selector directly written on the other selectors, is automatically converted to descendant selector
.son{
// & effect: less is told not to use future generations to convert transitioned directly behind the current mosaic can selector.
&:hover{
background: skyblue;
}
width: 200px;
height: 200px;
background: greenyellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
*/
/ * * Pseudo-element /
&::before{
content: "child element";
display: block;
background: yellowgreen;
width: 100px;
height: 100px;
}
}
/ * The wording does not implement hierarchical relationship
.son:hover{
background: skyblue;
}*/
1.15, less Inheritance
1. The mixed nature: that is, copy and paste the code into the class among the class of local calls.
2. Problem: After using a mixed, less redundant code file did not look, but there are redundant code in .css file. Workaround: Use less inheritance
3. Use inherited
Inheritance: Use selectors to achieve union
less in the wording:
Properties .center {}
.father: extend (.center) {} // inherited
css less by writing pattern is actually generated
.center,
.father{
Attributes
}
Mixed 4.less difference in inheritance and less in
Different syntax when used
Different results after conversion (direct copy is mixed, and inheritance is set selector)
1.16, less the conditions determined
In less may be added to the mixing performed is defined by the condition when only condition is satisfied (true) mixing until the code executed
comparison operators may be used when expression (>, <,> =, <=, =), logic operators, functions to check the condition judgment
div{
.size(100px, 100px);
background: skyblue;
}
Comparison Operators
.size(@width,@height) when (@width = 100px){
width: @width;
height: @height;
}
Or logic: (), (). JS equivalent of ||
Logic and :() and (). JS equivalent of &&
.size(@width,@height) when (@width = 100px),(@height = 100px){
width: @width;
height: @height;
}
.size(@width,@height) when (@width = 100px)and(@height = 100px){
width: @width;
height: @height;
}
Use the function:
.size (@ width, @ height) when (ispixel (@width)) {// implementation unit is px
width: @width;
height: @height;
}
二, full page
2.1, fullpage basic use
1. What is Fullpage?
Fullpage.js is a jQuery-based add-on that easily. Easily create a full-screen scrolling website.
2. What is jQuery?
With a frame package JS
3. jQuery will not be able to learn to use all Fullpage it?
Program development belong to a discipline "doing", no matter what programming language, we can not wait until everything began to learn to write programs
Fullpage Although it is a jQuery-based plug-ins, but whether it is or Fullpage are using jQuery JS written, it will be to JS
4. Why learn plugins or frameworks?
In the enterprise development because development time, costs, and other factors inertia
So not all of the functions required to achieve our own
In most cases there are some common features ready-made plug-ins or framework
We just need to find the right plug-ins or framework, you can quickly learn to apply (commonly known as moving bricks)
The plug or the frame of Origin
Individuals or teams on their own package
Baidu, Google, GitHub
Trade exchanges, and other technology summit
6. How to learn and use framework
Download Framework
View sample program framework
Read the framework document
Preparation of DEMO
Whether 7.Fullpage open source
Personal use of open source, commercial fee
dist folder is required import documents
examples is the case folder DEMO
vendors folder store slowing movement animation
8. Use Method:
8.1 The introduction of the file. In the following order
<link rel="stylesheet" href="css/fullpage.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/easings.js"></script>
<script src="js/scrolloverflow.js"></script>
<script src="js/fullpage.js"></script>
8.2 added elements
<div id="fullpage">
<div class="section">some section</div>
<div class="section">some section1</div>
<div class="section">some section</div>
<div class="section">some section</div>
</div>
8.3. Initialization
new full page ( '# full page', {})
2.2, fullpage common attributes
new full page ( '# full page', {
// set the background color of each screen
sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
// display indicator. Small dots on the right navigation bar is displayed
navigation:true,
// hover text to the right dots navigation bar
navigationTooltips: ['111', '22222', '33333', '444444'],
// prompt text to the right dots navigation bar
showActiveTooltip: true,
// change the position of the right side of the small dots navigation bar (on the right by default, can be set to the left)
navigationPosition: 'left',
// scroll in the end part in the race went to the first screen
loopBottom: true,
// Scroll to the portions in Roller went to the last screen
loopTop: true,
// infinite loop scroll
continuousVertical:true,
})
2.3, fullpage common callback
onLeave（origin, destination, direction）
Called before scrolling. Once the user leaves a section, the transition to the new section will be triggered this callback. Return "false" will cancel the move before the move.
origin: initial portion
destination: the end part
direction: up or down using the value according to the scroll direction.
afterLoad(origin, destination, direction)
The method of execution after rolling over.
origin: initial portion
destination: the end part
direction: up or down using the value according to the scroll direction.
Precautions: The first page will be entered when calling afterLoad method, except that for the first time into the web page called, the first parameter and the last parameter is null
new full page ( '# full page', {
sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
navigation:true,
onLeave: function (origin, destination, direction) {
console.log ( "before rolling call", origin, destination, direction);
},
afterLoad: function (origin, destination, direction) {
console.log ( "rolling after calling", origin, destination, direction);
}
})
2.4, fullpage common method
In addition to switching the screen using the mouse wheel, the method may be used to achieve the switching
2.5, fullpage custom menu
Click the button to jump to the corresponding screen
<script src="js/jquery-3.3.1.js"></script>
<script src="js/easings.js"></script>
<script src="js/scrolloverflow.js"></script>
<script src="js/fullpage.js"></script>
<ul id="myMenu" style="position: fixed; z-index: 999">
<li data-menuanchor = "firstPage" class="active"><a href="#firstPage">第一节</a></li>
<li data-menuanchor = "secondPage" class="active"><a href="#secondPage">第二节</a></li>
<li data-menuanchor = "thirdPage" class="active"><a href="#thirdPage">第三节</a></li>
<li data-menuanchor = "fourthPage" class="active"><a href="#fourthPage">第四节</a></li>
</ul>
<div id="fullpage">
<div class="section">some section111111</div>
<div class="section">some section2222222</div>
<div class="section">some section33333</div>
<div class="section">some section4444444</div>
</div>
new full page ( '# full page', {
sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
navigation:true,
anchors:['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
menu: '#myMenu',
});