给CSS加点料——Less（二）
♚
变量
在CSS中不能够定义变量，所以在很多元素互相依赖大小时，倘若需要改其中一个大小，我们就要从头改到尾，为了减少这个困扰，less引出了变量的概念，我们可以将值的大小定义为变量，直接在各处引用变量即可，需要更改时，工作量就会大大减小了，同时也会避免因为落下了某几项而产生的问题。
举个?：比如我想定义一个长度，宽与高都与这个长度有关，我们便可这样定义：
@length: 100px;
.item {
width: 2*@length;
height: @length;
background: red;
}//是不是清晰很多
♚
嵌套
嵌套也是less的一大特色。想一想在使用css的时候，我们如果想定位到一个元素，就要通过各种选择器去定位，这就会有两个问题，要么起很多id、class名（浪费文采），要么通过各种子选择器、后代选择器等进行定位（浪费体力，还不减肉！），这都不是我们所希望的。而有了less，我们则可以根据html的层级关系对css进行嵌套，根据层级关系进行定位，再通过编译生成那种我们看着巨恶心的长长的选择器。管他呢，我们自己写着方便就行了呀！
在嵌套过程中同html一样，我们通过缩进来表现层级关系，从而让我们更容易去定位元素，debug啦。在less的嵌套中还有一个&的存在，想一下倘若我们要对某个元素进行操作，而这个操作要影响其父级的样式，要怎么办呢，这时就用到了&。&可以用来引用父级选择器。下面我们就来试试吧～
♚
Have a Try！
下面我们就来试试吧～
比如兔妞就写了一个这样的页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="item"></div>
</div>
</div>
</body>
</html>现在会是什么样的呢？当然是什么也看不到的啦，div默认宽度100%，没有高度呀。我们下面就用less来写样式！
兔妞又写了一个这样子的样式文件：
@length: 100px;
.container {
width: 6*@length;
height: 3*@length;
background: yellow;
.row {
width: 4*@length;
height: 2*@length;
background: orange;
.item {
width: 2*@length;
height: @length;
background: red;
}
}
}我们看目录是这样滴：
显然这是不能用滴！我们要怎么办！编译呀～上一篇说的的呀～（不过在下那是生活中，我们很少这样去编译，且不说有很多编译软件的存在，很多IDE中也是有编译插件的，或者通过webpack打包的工程我们是可以设置为热更新的，此为后话）
lessc style.less style.css（别忘了换成自己less文件名以及想要转换的文件名哦～）
当当当当！多出来一个css文件哦！现在浏览器是什么效果呢？
变成了这个效果呢？那么我们再来看看解析成的CSS：是不是省去了很多步骤呢～
我们再来试试&：
@length: 100px;
.item {
width: 2*@length;
height: @length;
background: red;
}
.container {
width: 6*@length;
height: 3*@length;
background: yellow;
.row {
width: 4*@length;
height: 2*@length;
background: orange;
.item {
width: 2*@length;
height: @length;
background: red;
&:hover{
border: 1px solid #ccc;
}
}
}
}这个编译出来会是什么样呢？指向的就是定义元素位置的父元素，如此处则为item；
