详细介绍less（css预处理语言）

• 什么是less
• less解决什么问题
• less相比于css的优点
• 如何使用less
• • • • • • 第一步：创建一个less文件
          • 第二步：引入less文件
          • 第三步，编写less文件（和html一样的结构）
• 完整代码示例

什么是less

less（css预处理语言）Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

less解决什么问题

普通css写页面样式，是这样的：

#nav {display: flex;width: 100%;
}#nav>div:hover {color: red;
}#nav>div {flex: 1;text-align: center;display: flex;flex-direction: column;
}#nav>div>svg {height: 30px;
}

less写样式，是这样的：

#nav{display:flex;width:100%;>div{flex:1;text-align: center;display:flex;flex-direction:column;>svg{height:30px;}}>div:hover{color:red;}
}

你发现了什么？

less相比于css的优点

更少的代码量：
Less使用变量和嵌套规则来简化样式表，使其更易于维护和修改，从而减少了代码量。更好的可读性：
Less的嵌套规则使代码更易于阅读和理解，使开发人员更容易找到所需的代码块。更高的可重用性：
Less的变量和混合器使样式更具可重用性，从而减少了代码的重复。更好的扩展性：
Less允许开发人员使用自定义函数和操作符来扩展其功能，从而使其更加灵活。更好的兼容性：
Less可以与CSS完全兼容，因此可以轻松地将现有的CSS文件转换为Less文件，而不会影响现有的样式表。 更快的开发速度：
由于Less减少了代码量和提高了可重用性，开发人员可以更快地编写样式表，从而提高开发速度。更好的维护性：
由于Less的可读性和可重用性，样式表的维护变得更加容易，从而减少了开发人员的工作量。更好的跨浏览器兼容性：
Less可以生成兼容多个浏览器的CSS代码，从而使网站在不同的浏览器上具有一致的外观和行为。更好的团队协作：
由于Less的可读性和可重用性，开发团队可以更容易地协作编写样式表，从而提高了团队的效率。更好的可维护性：
Less的变量和混合器使得样式表更加可维护，从而减少了代码的重复和错误，从而提高了网站的稳定性和可靠性

如何使用less

第一步：创建一个less文件

第二步：引入less文件

头部引入本地less文件
引入less插件路径

第三步，编写less文件（和html一样的结构）

完整代码示例

HTML代码

c++
JavaScript
pathon
中文
Java

LESS代码

:root{--width:100vw;--height:15%;--height2:30px;--font-size: 1.1rem;
}
#language,header{margin: 0%;padding: 0%;
}header{display:flex;align-items:center;position:fixed;top:0;left:0;width:var(--width);height:var(--height);background-color:white;box-shadow:1px 1px 2px gray;#language{display:flex;width:100%;margin-bottom: 2%;>div{flex:1;text-align: center;display:flex;flex-direction:column;font-size: var(--font-size);>p::after{content: 'Lᵒᵛᵉᵧₒᵤ❤';font-size: 1.2rem;}}>div:hover{color:red;font-size: var(--font-size);}}
}

后续会上传资源，需要研究可以下载