在前端开发中，CSS 是不可或缺的一部分。但是，有时候我们需要一些动态的效果，如根据用户输入改变颜色、根据滚动条位置改变背景图等。在这种情况下，我们可以使用 LESS 和 JavaScript 来实现动态 CSS 效果。在本文中，我们将介绍如何使用 LESS 和 JavaScript 来实现这些效果，并提供示例代码。
LESS
LESS 是一种 CSS 预处理器，它可以让我们使用类似编程语言的方式来编写 CSS。它提供了一些非常有用的功能，如变量、嵌套规则、Mixin（混合）和函数等。这些功能可以让我们更轻松地编写 CSS，并且可以使我们的代码更加清晰和可维护。
变量
变量是 LESS 中最基本的功能之一。它允许我们定义一个值，并在整个样式表中使用它。这样，如果我们需要更改这个值，只需要在一个地方进行更改即可。
@primary-color: #007bff;
a {
color: @primary-color;
}嵌套规则
嵌套规则可以让我们更清晰地组织样式表，并且可以减少代码量。它允许我们将一个选择器嵌套在另一个选择器中，从而创建一个更具层次结构的样式表。
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
------------- -----
- -
---------------- -----
-
-
-
-Mixin
Mixin 是一个可以重复使用的代码块。它允许我们定义一段代码，并在需要的地方调用它。这样可以减少代码量，并提高代码的可重用性。
-- -------------------- ---- ------- ----------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - ------ - -------------------- -
函数
函数是 LESS 中最强大的功能之一。它允许我们编写自己的函数，并在样式表中使用它们。这样可以大大提高代码的可重用性，并且可以让我们更轻松地实现一些动态效果。
-- -------------------- ---- -------
------------ --------
--------------- -------- -
------- -------------- ---------
-
- -
------ ------------
------- -
-------------------- -----
------ -------
-
-JavaScript
JavaScript 是一种脚本语言，它可以让我们在网页中添加交互性和动态效果。在使用 LESS 实现动态 CSS 效果时，我们通常需要使用 JavaScript 来控制样式的变化。
获取元素
在 JavaScript 中，我们可以使用 document.querySelector() 或 document.querySelectorAll() 来获取元素。这两个方法可以让我们在 DOM 树中查找元素，并返回一个或多个匹配的元素。
const button = document.querySelector('.btn');添加类名
在 LESS 中，我们可以使用 & 来引用父级选择器。在 JavaScript 中，我们可以使用 element.classList.add() 来添加类名。这样可以让我们根据用户的操作来动态地改变样式。
button.addEventListener('click', () => {
button.classList.add('active');
});修改样式
在 JavaScript 中，我们可以使用 element.style 来修改元素的样式。这样可以让我们根据用户的操作来动态地改变样式。
button.addEventListener('click', () => {
button.style.backgroundColor = '#007bff';
});获取窗口位置
在 JavaScript 中，我们可以使用 window.scrollY 来获取窗口的垂直滚动位置。这样可以让我们根据滚动条的位置来动态地改变样式。
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
document.body.classList.add('scrolled');
} else {
document.body.classList.remove('scrolled');
}
});示例代码
下面是一个使用 LESS 和 JavaScript 实现动态 CSS 效果的示例代码：
-- -------------------- ---- -------
--------------- --------
---- -
-------- -------------
-------- ---- -----
----------------- ---------------
------ -----
-------------- ----
----------- ---------------- -----
-------- -
----------------- ---------------------- -----
-
-
---- -
----------------- ----------------------
---------------- ------
-------------------- -------
----------- ------------------- -----
---------- -
-------------------- ------ ----
-
-<button class="btn">Click me</button>
-- -------------------- ---- -------
----- ------ - -------------------------------
-------------------------------- -- -- -
-------------------------------
---
--------------------------------- -- -- -
-- --------------- - ---- -
----------------------------------------
- ---- -
-------------------------------------------
-
---结论
使用 LESS 和 JavaScript 可以让我们更轻松地实现动态 CSS 效果。LESS 提供了一些非常有用的功能，如变量、嵌套规则、Mixin 和函数等，可以让我们更轻松地编写 CSS。JavaScript 可以让我们根据用户的操作来动态地改变样式，从而实现一些动态效果。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67591ca762956301acd5d025