less基本使用

了解less

css是一门标记性语言，它的语法并不困难，使用起来基本没什么要求，但正是因为语法简单，书写css代码的时候就需要大量的看似没有逻辑大量的代码，代码多了之后后期很难做到维护修改，而且也会出现大量的重复代码，因此写的时候简单，一旦出了问题需要修改，就会非常困难，但是less的出现让我们可以像写js一下使用函数，变量等来书写css代码，也就提升了代码的复用和维护。
less是一门向后兼容的扩展语言

变量

css的代码重复率其实是非常高的，比方说字体大小，颜色等，这些东西有时候需要重复的去设置，less就可以设置变量来解决这个问题，首先创建一个html文档：

<p>我是红色</p>
    <p>我也是红色</p>
    <h1>20px</h1>

然后写less：

//定义变量(全局变量)
@colorRed:red;
@fontSize:20px;

p{
  color:@colorRed;
}
h1{
  font-size:@fontSize;
}

注意：less只是预处理器，引入的文件是转换之后的css文件，看一下效果：

嵌套

less提供了类似html一样的嵌套书写方式，css书写代码经常需要注意选择器的优先级，一不留神可能就被覆盖了，但是嵌套的书写方法，基本上可以避免出现选择器权重的问题了：

    <div>
        外面的div
        <ul>
            <li>
                <div>
                    里面的div
                </div>
            </li>
        </ul>
    </div>

当我们不想加类名的时候，要让外部的div与里面的div字体颜色不一样，就需要加上它的父元素的元素选择器，但是当html嵌套多了，不加类名就会特别麻烦，而使用less：

div{
    color: pink;
    ul{
        li{
            div{
                color: red;
            }
        }
    }
}

我们直接用仿html的结构来书写，基本上就不会出问题了

函数

less甚至可以像JavaScript那样写成函数的样式来书写代码：

.public(@col;@fontSize){
    color:@col;
    font-size:@fontSize;
}

p{
    .public(red;20px);
}

<p>我是红色</p>

看效果：

运算

less还提供了属性值运算的功能：

p{
    font-size: 12px + 30;
    padding: 200px - 50;
    margin-left: 10px * 10;
}

我们可以在less中这样写，转换成css：

p {
  font-size: 42px;
  padding: 150px;
  margin-left: 100px;
}

但是需要注意的是：运算符与值之间必须以空格分开，涉及优先级时可以以()进行优先级运算。

作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量，如果找不到，则从“父”级作用域继承。

@color: red;

div {
  background-color: @color;
}

p {
  @color: pink;
  background-color: @color;
}

div里没有变量，就找父级也就是全局，因此是红色
而p元素里声明了变量，就是pink了：

注释

less里面的注释也是需要注意的

// 这一行被注释掉了，但是在css中不会显示出来
/*
多行注释，只有多行注释才会在转换后的css文件中显示
*/

在css中是这样的：

/*
多行注释，只有多行注释才会在转换后的css文件中显示
*/

``
在less中虽然两种注释方法都能用，但是转换后的css文件只会显示多行注释的内容。