Less学习

1st less介绍：

什么是less?

less是一个CSS预处理器，可以为网站启用可自定义、可管理、可重用的样式表。它是一种动态样式表语言（第一个版本是ruby写的），扩展了css的功能。

它可以扩展css，然后编译成常规css，从而通过浏览器进行读取！它提供了诸如变量、函数、mixins多功能，可以动态构建css。

less的优点：

1. 排除代码冗余，跨浏览器支持友好！
2. less用javascript设计，并且创建在live中，编译速度比其他预处理器要快！
3. less使代码代码保持模块化，可读性提高，易于更改维护！

历史：

LESS由 Alexis Sellier 于2009年设计，开源，第一个版本使用ruby编写，后续版本采用javascript编写！

2nd less 安装

安装nodejs，然后使用npm（nodejs 的包管理器）进行安装！

（尝试了切换路径安装，不过好像npm默认安装到c盘下，╮(╯▽╰)╭）

 示例：

test.less:

@testColor:gold;
.div1{
    width: 200px;
    height: 200px;
    background-color: @testColor;
}

使用以下命令将test.less编译成test.css：

注意：test.less处于哪个文件夹，需要切换到相应文件夹，然后运行命令！

test.css：

.div1 {
  width: 200px;
  height: 200px;
  background-color: gold;
}

 注意：每次更改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- 5px;
  border-style: dashed;
  border-radius: 2px;
}
.div6 span {
  color: blue;
  border-color: gold;
  border-top- 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- 500px){
            color:blue;
        }
    }
}

　编译后变为：（@media提至最上方！）

@media screen and (min- 500px) {
  .test {
    color: blue;
  }
}

　　

3.5 less 操作（operations）：它可以支持一些+,-,*,/（加减乘除）的运算操作！可以对颜色或变量进行操作！

示例：

@initialWidth:100px;
.div4{
    @initialWidth *2;
    height: 100px;
    background-color: gold;
}

可编译为：

.div4 {
   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{
     percentage(@num);//return 50%;
    color: saturate(@base,10%);//increase saturation of base by 10%;
    border: 1px solid black;
}

编译的css为：

.div5 {
   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编译器：

点击此处！

结尾：

　　更多学习，访问官网！

　　也可访问：Less教程