less基础

1.初识less

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

    和css相比下，css的语法非常简单，而且对开发者来说要求比较低，比较合适小白者，但是遇到有些问题，比如没有这种变量、函数等等，的确还不如less的扩展性，需要写大量的代码，但是看眼中的确没有逻辑的代码，CSS冗余度是比较高的。不方便维护，不利于复用，而且没有计算的能力。

   如果对css有基础的话，less很容易上手的。因为css和less区别不大的，反正可以通过编译生成浏览器能识别的css文件。

 2.less使用

  这个less使用不用复杂，就是新建一个后辍名为less文件即可，然后在less文件使用less语句，当写完less语句编译后就会自动生成多了一个后辍名为css文件即可。

3.less和css简单的语句区别
 

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    a {
        color: red;
        &:hover {
            color: aqua;
        }
    }
}
//1.less嵌套 子元素直接写父元素的里面
.nav {
    .logo {
        color: green;
    }
    &::before {
        content: '';
    }
}
//2.如果有伪类 伪元素 交集选择器 ，我们内层选择器前面要加&

@baseFont: 50px;
html {
    font-size: @baseFont;
}
@border: 5px + 5;
//1.直接进行运算
div {
    width: 200px - 50;
    height: 200px * 2;
    border: @border solid red;
    background-color: #666 - #222;
}
img {
    width: 82rem / @baseFont;
    height: 82rem / 50rem;
}
//2.运算符左右两侧必须敲空格隔开
//3.两个数参与运算 如果只有一个数有单位，则最后结果以这个单位为准
//4.两个数参与运算 如果两个数都有单位且不一样，最后结果以第一个单位为准