CSS reset 是前端开发中比较常见的处理浏览器默认样式问题的方法。基于 LESS 实现 CSS reset 可以更加简便地操作样式，下面我们就来介绍一下如何使用 LESS 全局重置样式。
什么是 LESS
LESS 是一种 CSS 的预处理器，它扩展了 CSS 语言，增加了变量、Mixin、函数等功能，使得 CSS 更加简单、更易维护。
LESS 可以通过引入预先定义好的 LESS 文件，实现一些常用的样式操作，减少代码的重复性，同时也方便我们对样式进行批量操作。
如何使用 LESS 实现 CSS reset
使用 LESS 实现 CSS reset 需要引入一个 reset.less 的文件，具体操作有以下几步：
第一步：在 HTML 文件中引入 reset.less 文件
在 HTML 文件中添加以下代码：
<head> <link rel="stylesheet/less" type="text/css" href="reset.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"></script> </head>
第二步：创建 reset.less 文件
在项目目录下创建 reset.less 文件，文件中添加以下代码：
-- -------------------- ---- ------- -- ----- ---- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ ------- -- -------- -- - -- ---- -- ---- - ------- -- -------- -- - -- ---------- -- -- ----- -------- -- ------- --- -- ------ ---- ----- ----- ---- ---- ----- ---- ---- -- -- ----- ------- ---- ---- --- -- ---- ---- --- --- - ----------- ------------ ------- -- ------- -- -------- -- ---------- ----- --------------- --------- - -- -- ----- ---- -- --- -- - ----------- ----- - -- ------ -- --- - -------- ------ ------ ----- ------- ----- ------- ----- -
以上代码是一个基本的 CSS reset 样式。
第三步：使用 reset.less 文件
在需要重置样式的标签中添加 class="reset" 即可实现样式的重置，示例如下：
<body class="reset"> <h1>Title</h1> <p>Text</p> </body>
总结
通过 LESS 进行样式重置可以简化代码结构，降低出错率，并且方便维护。在项目中使用 LESS 进行样式操作也是非常常见的行为，它能够提高团队开发效率，降低工作压力，值得我们去尝试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e57b5ef6b2d6eab30ee83d
