Learn LESS Series 3 through open source documents

1. Introduction

Learn LESS Series 1 through open-source documents. We learned the basic knowledge of LESS through a classic LESS Mixins set preboot, including variables, comments, mixed and mixed parameters, for more information, see LESS Series 1 through open-source documents.

Learn LESS Series 2 through open-source documents and use tRRtoolbelt. the following describes how to interpret less code, including namespace, scope, multi-condition judgment and type judgment functions in LESS, string interpolation, and compilation avoidance, for more information, see LESS Series 2 through open-source documentation.

This tutorial explainsCss effectsProject source code to continue learning LESS. First, let's take a look at the DEMO of this project, which integrates many common animations, shadows, and other effects.

2. Code interpretation the project adopts the import method for file organization, src has css-effects.less, animations. less, box-shadow.less, icons. less, mixins. less and other files. The css-effects.less file is the main file, which imports the animation, box-shadow, icons three effect files, mixins. less is the general mixin set used by this project. First look at the css-effects.less

//css-effects.less@import 'src/animations';@import 'src/icons';@import 'src/box-shadow';

It is very simple to import the effect file, and then we will focus on the animation effect file.

//animations.less@import "mixins";.animation-ellipsis(){overflow:hidden;display: inline-block;vertical-align: top;font-size:inherit;text-align:right;width:1em;.animate(ellipsis 1s ease infinite alternate);&:after{content:"...";overflow:hidden;display: inline-block;}.anim-ellipsis(){from {width:0;}to {width: 2em;}}@-webkit-keyframes ellipsis{.anim-ellipsis();}@-moz-keyframes ellipsis{.anim-ellipsis();}@-ms-keyframes ellipsis{.anim-ellipsis();}@keyframes ellipsis{.anim-ellipsis();}}

After mixins. less is imported, it is an animation definition. 2.1 The importimport command is used to import another file. In standard css, the @ import command must not be prefixed with the file at the beginning before all commands. But as a good development habit, it is strongly recommended to start with a file.

// @ Import several formats // import the less file @ import "mixins. less "; // if the less file is imported, the extension can be @ import" mixins "by default. // You can also import other format files. If it is .css, it will be processed according to the css file. If it is another format, will be considered as LESS file @ import "style.css" @ import "some. php"

In addition, LESS provides an "Import keyword" that allows you to use external files in multiple ways. The syntax for using Import Options is as follows:

Syntax: @import (keyword) "filename";

Currently, the following import keywords are available:

• reference: Use a less file but do not output it ---- use this less file but do not output
• inline: Include the source file in the output but do not process it ---- the less file is included in the output, but not processed.
• less: Treat the file as a less file, no matter what the file extension-no matter what the extension of external files, all look for less processing
• css: Treat the file as a css file, no matter what the file extension-no matter what extension of external files, all look for css Processing
• once: Only include the file once (this is default behavior) ---- introduce this external file once (default)
• multiple: Include the file multiple times ---- multiple times introduce this external file

Okay. Let's continue to see the animation effect file.

.animation-mexican(){overflow:hidden;display: inline-block;text-align:center;b{display: inline-block;.animate(mexican 1s 0.0s ease-in-out infinite alternate);&:after{content: ".";}}@iterations:10;.loop(@iterations);// Looping generator.loop (@index) when (@index>0){b:nth-child( @{iterations}n + @{index} ){.animate-delay( (@index/10) * 1s);}.loop((@index - 1));}// Animation//.anim-mexican(){80% {.transform(translateY(0));}to {.transform(translateY(-0.3em));}}@-webkit-keyframes mexican{.anim-mexican();}@-moz-keyframes mexican{.anim-mexican();}@-ms-keyframes mexican{.anim-mexican();}@keyframes mexican{.anim-mexican();}}

We need to focus on the implementation of the LESS loop in this animation mixin. 2.2 cycles

@ Iterations: 10; // define a loop. Use when to determine the conditions of the loop. loop (@ index-1) implements the next loop. loop (@ index) when (@ index> 0) {B: nth-child (@ {iterations} n + @ {index }){. animate-delay (@ index/10) * 1 s );}. loop (@ index-1);} // use of the loop. loop (@ iterations );

Let's take a look at the example. You can also use the loop pointer as a variable in the loop body.

// Looping generator.loop (@index) when (@index>0){b:nth-child(@{iterations}n + @{index}){@rotate:@index*@degrees;.transform(rotate( -@rotate ), 0 0 );}.loop(@index - 1);}

3. Summary and outlook this tutorial provides code parsing for css effects, mainly explaining the import and loop knowledge in LESS. The series of tutorials are still ongoing, so stay tuned. ---------------------------------------------------------------
Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------