书写了大量的css后,有没有发现其实好多代码块是可以重复利用的,而且大量的css样式代码,如果在书写顺序混乱、命名不规范的情况下很容易造成代码错乱,或者干扰你的排版思路
Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性,使CSS更易维护和扩展。更少可以运行在Node或浏览器端。
LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。我们可以从下面的代码了解变量的使用及作用:
less文件
@dawa:#fff;
header{
background:@dawa;
height:100px;
}
```经过编译生成的 CSS 文件如下:
```header{
background:#fff;
height:100px;
}
从上面的代码中我们可以看出,可以将相同的值定义成变量统一管理起来。该特性适用于定义主题,我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,这样不同的主题只需要定义不同的变量文件就可以了。less 变量以@作为前缀,不能以数字开头, 不能包含特殊字符。
嵌套可以增强代码的层级关系,我们也可以通过嵌套来实现继承,这样很大程度减少了代码量,代码量看起来更加清晰。
height:80px;
overflow:hidden;
cursor:pointer;
transition:all .35s;
}
&:hover{
height:320px;
}
ul{
list-style:none;
margin:0;
padding:0;
}
li{
width:29%;
height:78px;
line-height:80px;
text-align:center;
border:solid 1px @dawa;
}
有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素