关于less的基础用法

       less作为一门CSS扩展语言，也就是说CSS预处理器。（Leaner Style Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，根据按这样的话，那么less可以让我们写更少的代码做更多的事情。

1.less的安装

在页面中直接引入less.js，可去官网下载放到自己的依赖包文件中，或者利用CDN在线引入.

如果安装了node环境也可以全局安装less，指令是  npm install -g less

html不能直接使用less,需要先对less进行编译,编译生成css文件。在vs-code中安装easyless插件，会自动对less进行编译在同目录下创建一个css文件

2.less定义变量

less变量是没有固定的值,可以改变的,因为css中的一些颜色和数值等经常使用

@变量名:值;

命名规范:必须有@前缀,不能包含特殊字符,不能以数字开头,大小写敏感

@color:pink;//定义一个粉色变量
@font14:44px;//定义一个字体为14px的字体
body{
    background-color: @color;
}
div{
    color: black;
    font-size: @font14;
    line-height: 100%;
}

3.less的嵌套使用

在css中对元素进行样式编写不能嵌套使用，less便是解决了这个问题，允许子元素嵌套在父元素中进行编写。

// less的嵌套
.header{
    width: 200px;
    height: 200px;
    background-color: pink;
    a{
        color: red;
        // 添加伪类hover
        &:hover{
            color: blue;
        }
    }
}
.nav{
    .logo{
        color: green;
    }
    // 添加伪元素
    &::before{
        content: "1";
    }
}

注意：添加伪元素或者伪类时用&符号

4.关于less的运算

运算符左右两侧必须敲一个空格隔开,切记除号要用括号把算式括起来

两个数参与运算,如果只有一个数有单位,则最后就以这个单位为准

两个书参与运算,两个数都有单位,并且单位不一样时,最后的结果为第一个单位为准

@border:5px + 5;
html{
    font-size: 50px;
}
div{
    width: 200px - 50;
    height: (100px+100px) * 2;
    border: @border solid #666 - #222;
}
img{
    width: (82rem/50px);
    height: (82rem/50px);
}

小编整理的知识一些基础的用法，欢迎各位道友进行补充指点。