关于less的总结，保姆级教程，方便大家学习

璇璇吴

已于 2022-07-01 16:04:17 修改

阅读量232

点赞数

分类专栏： less 文章标签： less 学习 css

于 2022-07-01 16:01:39 首次发布

本文链接：https://blog.csdn.net/weixin_70027586/article/details/125559595

版权

less 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

less

1.打开HBuilder->任务栏找到工具->插件安装->安装新插件->前往插件时长安装->登录/注册自己的账户->下载less并安装，步骤如图下所示：

less的安装

2.工具->外部命令插件配置->compile-less->package.json->找到"key"：->“key”:`"ctrl+s"`,->找到"onDidSaveExecution"：->“onDidSaveExecution”：`true`，如图下所示：

配置内容更改

3.在HBuilder新建自定义文件xxx.less->输入内容->ctrl+s编译出css即完成安装并可以正常使用咯~

4.html引入css->link

less学习内容九个点

less是css预处理语言，可以让我们像写js一样写css

①.变量

@width:10px;
@color:#f50;

//引用
.h1{
   width:@width;
   color:@color;
}

②.单位运算

.h1{
   @width * 2;//+-*/如果不执行，看是否加了加空格
}

③.混合传参

.round(@r:5px){
     border-radius:@r;
     box-shadow:0 @r/2 @r rgba(0,0,0,.3);
}
h1{.round};//引用

p{.round(8px);}

④.嵌套

.nav{
   height:@width;
   ul{
		width: 100px;
		margin: 0 auto;
	}
	li{
		float: left;
	}
   a{
      color:#ccc;
      &:hover{color:#f70;}
}

}

⑤.注释

// js 注释(自动过滤)
/* css注释(保留)*/

⑥.导入

//在less里导入
import "xxx.less";
import "xxx.css";

⑦.字符串

@base:"http://baidu.com";
.mydiv{
    background-image:url('@{base}/images/abc.png');//@{base}以便修改网址
}

⑧.函数

less内置很多函数

color:darken(#f70,10%)//颜色变深10%
color:lighten(#f70,10%)//颜色变浅10%
//eg：
a{
 &:hover{
			background-color:darken(#f50,10%);
		}//鼠标经过颜色变深10%
}

⑨.循环/递归

@loop(@end,@i=0)when(@i<@end){//循环的条件
     @c:@i+10;
     .col-@{@c}{width:@c + 0%;}
     loop(@end,@i+10);//自己调用自己
}
loop(100)

css上面内容为：
col-10{width：100%；}
col-20{width：100%；}
col-30{width：100%；}
col-40{width：100%；}
col-50{width：100%；}
col-60{width：100%；}
col-70{width：100%；}
col-80{width：100%；}
col-90{width：100%；}
col-100{width：100%；}

以上就是我们less学习中的具体内容，希望能帮助到大家~