LESS 是一种基于 CSS 的预处理器，通过 LESS 我们可以更加方便地编写 CSS，并且使其更易于维护。在前端开发中，经常会用到 rem 单位，那么如何在 LESS 中使用 rem 呢？本文就为大家介绍如何在 LESS 中使用 rem。
首先，我们需要了解一下什么是 rem 。 rem 表示相对的根元素字体大小单位，即相对于 html 标签的 font-size 大小来计算元素的大小。通常情况下，我们会将 html 标签的 font-size 大小设置为 16px，这样我们可以通过计算来得知 1rem 等价于 16px。
LESS 支持将 px 单位自动转换为 rem ，我们只需要在 CSS 样式中使用 rem 单位，并在 LESS 中确定 html 的 font-size 大小即可。在 LESS 样式表中，我们可以使用 @baseFontSize 变量来设置 html 标签的 font-size 大小。
接下来，让我们来看一下示例代码。
-- -------------------- ---- ------- -- -- ---- --- --------- -- -- -------------- ----- -- ---- ----- ---- -- ------- --- -- ---------- ----------- - ------------ ---------------- - -------------- ----- - -- ---- -------- ---------- --- -- -------- - -- ----------- -- -- ------ ------ ------- ------ -- -- ----- - -- --- --- -- ---------------------- ------------------- -------------------- -
在上面的代码中，我们首先定义了一个 @baseFontSize 变量来设置 html 标签的 font-size 大小。接着，我们定义了一个 .px-to-rem 的 mixin ，用于将 px 单位自动转换为 rem 。最后，我们定义了一个 .example 类，其中包含了一些常规样式属性，以及通过 mixin 将 px 转换为 rem 的样式属性。
上述代码将被编译为以下 CSS 代码：
.example {
width: 320px;
height: 240px;
font-size: 1rem;
margin: 20px 0;
padding: 10px;
}如上所示，我们使用 @baseFontSize 变量来确定 html 标签的 font-size 大小，并使用 .px-to-rem mixin 将 px 单位自动转换为 rem ，从而实现了在 LESS 中使用 rem 的效果。
总结：在 LESS 中使用 rem 可以使我们更加方便地编写 CSS 样式，并且使其更易于维护。只需要在 LESS 样式表中使用 @baseFontSize 变量来确定 html 标签的 font-size 大小，然后使用 .px-to-rem mixin 将 px 单位自动转换为 rem ，即可实现在 LESS 中使用 rem 的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653f70e57d4982a6eb900d25