Less学习
Less学习
1st less介绍：
什么是less?
less是一个CSS预处理器，可以为网站启用可自定义、可管理、可重用的样式表。它是一种动态样式表语言（第一个版本是ruby写的），扩展了css的功能。
它可以扩展css，然后编译成常规css，从而通过浏览器进行读取！它提供了诸如变量、函数、mixins多功能，可以动态构建css。
less的优点：
- 排除代码冗余，跨浏览器支持友好！
- less用javascript设计，并且创建在live中，编译速度比其他预处理器要快！
- less使代码代码保持模块化，可读性提高，易于更改维护！
历史：
LESS由 Alexis Sellier 于2009年设计，开源，第一个版本使用ruby编写，后续版本采用javascript编写！
2nd less 安装
安装nodejs，然后使用npm（nodejs 的包管理器）进行安装！
（尝试了切换路径安装，不过好像npm默认安装到c盘下，╮(╯▽╰)╭）
示例：
test.less:
1 @testColor:gold;
2 .div1{
3 width: 200px;
4 height: 200px;
5 background-color: @testColor;
6 }使用以下命令将test.less编译成test.css：
注意：test.less处于哪个文件夹，需要切换到相应文件夹，然后运行命令！
test.css：
1 .div1 {
2 width: 200px;
3 height: 200px;
4 background-color: gold;
5 }注意：每次更改test.less后，如需更改test.css,都需要重新运行lessc命令！
3rd less 语言特性：
3.1 less变量（variables）：注意：通常less变量是类似“常数”，只能被定义一次！
以下：定义了testColor变量！
@testColor:gold;
.div1{
background-color: @testColor;
}编译后：
.div1{
background-color:gold;
}3.2 less混合（mixins）：使用类或id选择器（与css样式相同）申明mixins。这样可以将一个类的属性用于另一个类！
示例：
.div6 {
p{
color: blueviolet;
.border;
}
span{
color: blue;
.border;
}
}上面采用了嵌套，如果不采用，上半部分等价于下面：
.div6 p{
color: blueviolet;
.border;
}编译后：
.div6 p {
color: blueviolet;
border-color: gold;
border-top-width: 5px;
border-style: dashed;
border-radius: 2px;
}
.div6 span {
color: blue;
border-color: gold;
border-top-width: 5px;
border-style: dashed;
border-radius: 2px;
}3.3 less 嵌套（Nested Rules）：
示例：
<div class="div2">
<h1>this is div2</h1>
<div class="div3"><h1>this is div3</h1></div>
</div>test.css这样写：
.div2 h1 {
color: goldenrod;
font-style: italic;
}
.div2 .div3 h1 {
color: silver;
font-style: initial;
}如今test.less这样写：
.div2{
h1{
color: goldenrod;
font-style: italic;
}
.div3{
h1{
color: silver;
font-style: initial;
}
}
}看起来结构更加清晰，层次分明！
3.4 嵌套规则及冒泡（Nested Directives and Buddling）：诸如media和keyframe的规则，可以像选择器被正常的嵌套。但是他们编译成css文件后，将会出现在最上方！可参考
示例：
.test{
@media screen {
color: gold;
@media (min-width: 500px){
color:blue;
}
}
}编译后变为：（@media提至最上方！）
@media screen and (min-width: 500px) {
.test {
color: blue;
}
}3.5 less 操作（operations）：它可以支持一些+,-,*,/（加减乘除）的运算操作！可以对颜色或变量进行操作！
示例：
@initialWidth:100px;
.div4{
width:@initialWidth *2;
height: 100px;
background-color: gold;
}可编译为：
.div4 {
width: 200px;
height: 100px;
background-color: gold;
}3.6 less转义（Escaping）：~'anything' 或 ~"anything"将会转化为 anything！
示例：
.div4::after{
content:~ "'abcd//less'";
}lessc将会将其编译为：
.div4::after {
content: 'abcd//less';
}3.7 less函数（functions）：less提供了一些转换颜色，操作字符串，计算数学等函数。参考：点击此处！
示例：
@base:gold;
@num:0.6;
.div5{
width: percentage(@num);//return 50%;
color: saturate(@base,10%);//increase saturation of base by 10%;
border: 1px solid black;
}编译的css为：
.div5 {
width: 60%;
color: #ffd700;
border: 1px solid black;
}3.8 命名空间和访问器（Namespaces and Accessors）：将mixins分组，从而可以避免命名冲突，封装使用！
示例：
#rule{
color:red;
.class1{
color: blue;
background-color: gold;
.class2{
color: orange;
}
}
}
.test7{
font-size: 15px;
#rule > .class1 >.class2;
}3.9 less 变量范围（Scope）：与编程语言很相像；它们首先从本地作用域进行查找，如未找到，则一级一级向上查找！
@var:red;
.div7{
@var:orange;
color: @var;
}编译后：
.div7 {
color: orange;
}注意：less不存在javascript中的变量提权问题，变量或者mixins定义在使用前或使用后效果一样！
3.10 注释（comments）：块注释（/* */）和内联注释（//）
示例：
/*
this is block comments;
*/
@var:red;
.div7{
@var:orange;
//this is inline comments;
color: @var;
}编译后：
/*
this is block comments;
*/
.div7 {
color: orange;
}注意：我们可以显然观察到，块注释的内容保留到了css中，而内联注释的没有被保存！
3.11 导入（importing）：导入一个.less文件后，其中所有的变量就可以在当前文件下使用了！
示例：
@import 'test.less';
.div{
color: @testColor;
}注意：编译后，test.css也将会被编译，即导入的less文件也会被编译！
4th less中级内容
4.1 变量插值（Variable Interpolation）:
示例：
@val:div1;
.@{val}{
border:solid;
}编译后：
.div1 {
border: solid;
}给变量定义变量名：
示例：
@first:"I'm first";
@second: "first";
div1::after{
content: @@second;
}编译后：
div1::after {
content: "I'm first";
}延迟加载（Lazy Evaluation）：在使用以前申明变量与使用之后申明变量效果一样。
4.2 扩展（Extend）：Extend是一个Less伪类，通过使用:extend在其引用（reference）的选择器（下面指h2）中扩展另一个选择器（下面指.test）。
示例：
h2{
&:extend(.test);
font-size:13px;
}
.test{
color: red;
}编译后：
h2 {
font-size: 13px;
}
.test,
h2 {
color: red;
}扩展（Extend）的语法：
1.
.a:extend(.b){};
//上面代码与下面代码等价！
.a{
&:extend(.b);
}2.
// 扩展所有带有.d的选择器，如.x.d 和.d.x
.c:extend(.d all){};
//扩展仅是.d的选择器
.c:extend(.d){};更多有关Extend的语法：参考链接
4.3 混合（mixins）:
.test1{
color: blue;
}
.test2{
background-color: black;
}
.test3{
.test1;
.test2;
}注意：mixins调用时，没有参数，.test1()与.test2()表现是一样的！
.test3 {
color: blue;
background-color: black;
}注意：如果.test2{background-color:black}变为.test2(){background-color:black;}编译后.test2不会显示出来！！！
混合参数：
.border(@width;@style;@color){
border: @width @style @color;
}
.test11{
.border(1px;solid;gold);
}编译后：
.test11 {
border: 1px solid gold;
}混合函数：
.average(@x,@y){
@average:((@x+@y)/2);
}
.test12{
.average(10, 20);//调用函数
padding: @average;//使用函数的返回值
}编译后：
.test12 {
padding: 15;
}在线less编译器：