Less基础(CSS预处理器）

Less中文网址： http://lesscss.cn/

//改的时候只需要修改第一行`@color: green;`这部分所需部分即可

//定义一个字体的变量
@font14: 14px;
//定义一个绿色的变量 
@color: green;
body {
    background-color: @color;
    }
div {
    color: @color;
    }

引入html

<style>
...
</style>
/*nest为文件名*/
<link rel="stylesheet" href="nest.css">

Less的嵌套子元素可以直接写在父元素里

**伪类选择器、交集选择器、伪元素选择器 内层选择器的前面需要加“&”

.nav {
    a {
        &:hover {
        color: blue;
        }
    }
}

Less运算
可以进行 “+”、 “-”、 “*”、 “/”运算

运算符左右两侧必须敲一个空格隔开

@border： 5px + 5;
img {
    width: 82 / 50rem;
    }

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

像背景颜色也可以进行运算

/*最后颜色结果为#444*/
color: #666 - #222;