less基础用法
1、变量
@width: 10px;
@height: @width + 10px;
#header{
width: @width;
height: @height;
}
2、嵌套
/*先来看最简单的嵌套,由于代码非常简单,就不再解释了*/
.head_box{
position: relative;
height: 1.25rem;
background: url(../images/head_bg.png) no-repeat;
background-size: 100% 100%;
h1{
font-size: .475rem;
color: #fff;
text-align: center;
line-height: 1rem;
}
}
/*如果是需要用到伪元素或者伪类了,需要这么做。假如我们有一个div,class=“grid”,我们需要设置grid的样式和它的伪元素,那么代码如下:*/
.grid{
position: relative;
height: 3.875rem;
border: 1px solid rgba(25,186,139, 0.17);
margin-bottom: .1875rem;
&::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-top: 2px solid #78c5ce;
border-left: 2px solid #78c5ce;
}
}
/*这里需要注意的是,给.grid元素的伪元素设置样式,在less语法中,before也好,after也罢,都要当做子元素嵌套到.grid{ }内部的(当然,你也可以遵循普通css语法写外边)。
此时就需要使用‘&’符号,来代表“当前元素”,本例中,当前元素毫无疑问就是.grid元素
*/
3、运算
/*算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话,算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如:px 到 cm 或 rad 到 % 的转换。
// 所有操作数被转换成相同的单位*/
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
4、导入
导入的意思就是,你可以在一个less文件中,引入另外一个less文件,这样就可以在这个less文件中使用另外一个less文件定义的元素了,比如变量。
@import "library"; // library.less
@import "typo.css";
如果引入的是less文件,则可以不写.less后缀。