前端开发中，经常需要实现固定底部和固定顶部的效果，比如固定导航栏或者固定底部的版权信息。使用 LESS 可以方便地实现这些效果，并且代码易于维护和扩展。本文将介绍 LESS 中实现固定底部和固定顶部的技巧。
固定底部
实现固定底部的效果，可以使用 CSS 的 position 和 bottom 属性。首先需要将底部元素的 position 属性设置为 fixed，bottom 属性设置为 0，这样底部元素就会固定在页面底部。接下来在 LESS 中可以使用 mixins 来实现。
mixins
在 LESS 中，mixins 可以理解为一组 CSS 规则集合，可以用来扩展样式。下面是一个实现固定底部的 mixins：
.fixed-bottom(@bottom) { position: fixed; bottom: @bottom; }
这个 mixins 只需要传入底部距离底部的距离值即可使用。
示例代码
HTML 代码：
<div class="wrapper"> <div class="content"> <p>Content area.</p> </div> <div class="footer"> <p>Footer area.</p> </div> </div>
LESS 代码：
-- -------------------- ---- ------- -------- - --------- --------- ----------- ------ --------------- ----- -------- - --------------- ----- - ------- - ----------------- ------ ----- ------- ----- ----------------- ----- ------ ----- ----------- ------- ------------ ----- - -展开代码
这里首先给 wrapper 元素设置了一个 min-height 属性，确保内容区域能够与 footer 区域重合。然后给 content 和 footer 元素都设置了 padding-bottom 属性，让内容区域和 footer 区域不重叠。最后，使用 .fixed-bottom mixins 固定了底部的 footer 元素。
固定顶部
固定顶部的效果可以使用 CSS 的 position 和 top 属性实现。与固定底部不同，固定顶部需要给顶部元素设置一个 z-index 值，以确保顶部元素在页面中的层次。接下来在 LESS 中也可以使用 mixins 来实现。
mixins
这个固定顶部的 mixins 与固定底部的 mixins 类似，只需要将 bottom 属性改为 top 属性即可。
.fixed-top(@top) { position: fixed; top: @top; z-index: 1; }
这里需要注意的是，z-index 值必须大于默认值 0 才能被设置在元素上。
示例代码
HTML 代码：
<div class="wrapper"> <div class="header"> <p>Header area.</p> </div> <div class="content"> <p>Content area.</p> </div> </div>
LESS 代码：
-- -------------------- ---- ------- -------- - ------- - -------------- ------ ----- ------- ----- ----------------- ----- ------ ----- ----------- ------- ------------ ----- - -------- - ------------ ----- - -展开代码
这个例子中，给 header 元素使用 .fixed-top mixins 固定在页面顶部。接下来给 content 元素设置 padding-top 属性，避免 header 和 content 区域重叠。
小结
在 LESS 中，通过使用 mixins，可以方便地实现固定底部和固定顶部的效果。这个技巧在实际开发中非常实用，建议大家多加使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b6f572306f20b3a6375a50
