Less语法详述
Less语法:
1、 Less是一个CSS预处理器, Less文件后缀是.less
2、扩充了CSS 语言, 使CSS 具备一定的逻辑性、计算能力。
3、 注意:浏览器不识别Less代码,目前阶段,网页要引入对应的CSS文件。
Easy Less(vscode插件)
作用:less文件保存自动生成css文件
Less语法注释
注释:
单行注释:
语法:// 注释内容
快捷键:ctrl + /
块注释:
语法:/* 注释内容*/
快捷键: shift + alt + A
Less运算语法
运算:
加、减、乘直接书写计算表达式
除法需要添加小括号或.(英文的“.”)
注意:
Ø 表达式存在多个单位以第一个单位为准
div {
width: 100px + 200px;
width: 200px - 100px;
width: 50 * 4px;
width: (200px / 100);
width: 400px + 100deg + 20%;
height: 100px+200px;
width: (70 / 37.5rem);
}
Less嵌套语法:
// 1.生成后代选择器
// 2.生成子代选择器 >
// 3.交集选择器
// 4.并集选择器
// 5.伪类选择器 :hover
// 6.添加伪元素
// 7.结构伪类选择器
.father {
color: #333;
// 生成后代选择器
.son {
width: 200px;
height: 200px;
}
}
// 生成子代选择器 >
.box1 {
>.box2 {
color: orange;
}
}
// &:当前选择器,表示的就是直接上级
.head {
span {
&.text {
font-size: 20px;
}
}
}
// 并集选择器
.father {
.son1,.son2 {
color: tomato;
}
}
// 交集选择
.father {
.free.active {
color: tomato;
}
}
// 伪类选择器 :hover
.box {
li {
a{
&:hover {
color: #333;
}
}
}
}
// 添加伪元素
.father {
a::before {
content: "";
}
}
.father {
a {
&::before {
content: "";
}
}
}
// 结构伪类选择器
.box {
ul {
li:nth-child(2) {
font-size: 30px;
}
}
}
.box {
ul{
li {
&:nth-child(2) {
font-size: 50px;
}
}
}
}
Less变量设置属性值
// 变量 @变量名: 值;
@ThemeColor:#6cf;
@fontSize:14px;
body {
background-color: #f3f4f3;
}
p {
color: @ThemeColor;
font-size: @fontSize;
}
a {
background-color: @ThemeColor;
}
div {
box-shadow: @ThemeColor;
}
Less导入写法引用其他Less文件
导入: @import “文件路径”;
// @import "你要导入的文件路径";
@import "./03-计算.less";
使用Less语法导出CSS文件
方法一:
配置EasyLess插件, 实现所有Less有相同的导出路径
l 配置插件: 设置→ 搜索EasyLess → 在setting.json中编辑→ 添加代码(注意,必须是双引号)
方法二:控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加/// out: ../css/
Less禁止导出
在less文件第一行添加: // out: false
// out: false
Less压缩导出
// compress: true ,out: ../css/
.box {
width: 200px;
height: 200px;
background-color: skyblue;
text-align: center;
font-size: 60px;
line-height: 60px;
}
F2E_keze: 那岂不是改一下代码,就要运行下npm run dev:mp-weixin?
普通网友: 优质好文,支持支持。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】
CSDN-Ada助手: 恭喜您发布了第20篇博客!看到您这篇关于“app专项测试-adb概述及环境部署”的文章,对adb的介绍和环境部署有了更深入的了解,非常有收获。希望您能继续保持创作的热情,分享更多关于测试的知识和经验。以后可以考虑结合实际案例进行分析,或者深入探讨一些测试工具的使用技巧,让读者更加受益。期待您的下一篇文章!