Less：less的使用方法及如何使less文件

Less变量，变量是指没有固定的值，这个值是可变的，在CSS中的一些颜色和数值等会经常使用到。

Less变量命名规范：

• 必须有@为前缀
• 变量名不能包含特殊字符
• 变量名不能以数字开头，但可以以数字结尾
• 大小写敏感（变量名@color和@COLOR是两个不同的变量）

代码示范

// 定义了一个黄绿色的变量
@color :yellowgreen;
p {
// p想要使用这个颜色直接在：后面写上定义的变量名即可
    color: @color;
}

但需要知道的是，html文件是不能引入less文件的，所以此时我们需要将less文件编译为css文件引入到我们的html文件中使用。

Less嵌套写法：
写代码时经常会有嵌套的关系存在，也就是父亲和儿子的关系，div里套div…，这时候Less也有自己的写法。

代码示范：

// 定义了黄绿色和粉色的变量
@color :yellowgreen;
@colo2 :hotpink;
.box{
// less嵌套写法，p是box的儿子，就能直接写到box的下面，如果p也有自己的儿子，比如span，写到p的下面即可
    p {
        color: @color;
        span {
            color: @colo2;
        }
    }
}

伪类选择器less写法：
如果出现了伪类选择器:hover ::after ::before等，在less中也有自己的写法。
我们需要在内层选择器的前面加上一个&符号。
代码示范：

@color :yellowgreen;
@colo2 :hotpink;
.box{
    p {
        color: @color;
        span {
            color: @colo2;
// 如果不加&符号，会编译成：.box p span :hover，会多出一个空格，所以在less中需要加上&，&不会生成后代选择器，&表示当前选择器，通常配合伪类或伪元素使用
            &:hover {
                color: red;
            }
        }
    }
}