1 less中的变量
//对值进行声明
@link-color: #ccc
//定义变量名称
.@{sleName} {}
@bg: background-color;
//定义属性名称
.container {
@{bg}: red;
}
2 继承（复用重复样式）
//继承必须位于选择器最后
//继承选择器名不能为变量
.a:hover:extend(.b) {}
.a {
&:extend(.b,.c,.d) {}
}
.b {
.c{}
}
//继承嵌套结构内样式需要加上all
.a:extend(.b all) {}
3 混合
用于值不确定的场景文章来源：https://www.toymoban.com/news/detail-648773.html
//@arguments表示传入的所有参数
.flex(@flex： 1){
flex: @flex
}
.a {
.flex(2);
}
//条件mixins
.bg (@color; @width) when (@width >= 50%) {}
4 合并
//相同步骤需要把符号改成+_
.mixin(){
transform+_: scale(2);
}
5 将颜色字符串转换为可以使用的颜色
.color {
color: color("#fff");
}
6 获取图片文件的尺寸
.img {
width: image-width("file.png");
height: image-height("");
background-size: image-size("file.png");
}
7 单位转换函数
文章来源地址https://www.toymoban.com/news/detail-648773.html
.convert {
time: convert(9s,"ms");
}
8 将内联资源转换为base64或text/html格式
.img {
background: data-uri('../data/image.jpg');
}
9 实践
.flex(@jc:center,@ai:center, @fd: row, @fw: nowrap) {
display: flex;
justify-content: @jc;
align-items: @ai;
flex-direction: @fd;
flex-wrap: @fw;
}
.flex_sb_c_w {
.flex(space-between,center,row,wrap);
}
到了这里，关于less基本使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
