如何使用 SASS 在按钮上应用悬停效果?
我们可以使用 SASS 借助 :hover CSS 选择器在按钮上应用悬停效果。SASS 的全称是 Syntactically Awesome Stylesheet，它是一个 CSS 预处理器，这意味着可以从相应的 SASS 代码生成 CSS。使用 SASS 而不是直接编写 CSS 具有一系列优势，例如更易读的代码和易于学习的代码语法，并且可以利用这些优势在 Web 应用程序中更轻松、更高效地设置 HTML 元素的样式。
在本文中，我们将借助 SASS 为按钮元素添加样式。首先，我们将编写一段 SASS 代码，为悬停按钮添加一组样式。然后，我们将借助"sass"编译器生成其对应的 CSS 文件。之后，我们可以将生成的 CSS 文件添加到 HTML 文件中，并使用其中的样式来设置按钮元素的样式。
示例
在此示例中，我们将借助 SASS 在鼠标悬停时更改按钮元素的背景和字体颜色。
首先，创建一个包含基本页面布局的 HTML 文件。
文件名:index.html
<!DOCTYPE html> <html lang="en"> <head> <title>How to apply custom color to glyphicon icon embed within a link styled with Bootstrap?</title> <link rel="stylesheet" href="index.css"> </head> <body> <h1>Button hover effect using SASS!</h1> <button class="button">Click me!</button> </body> </html>
现在，创建一个 SASS 文件来编写按钮的样式。
文件名:index.scss
.button {
&:hover {
background-color: black;
color: white;
}
}
现在，借助"sass"编译器生成相应的 CSS 文件。请使用以下命令安装它 -
npm install sass -g
或者
yarn add sass -g
上述命令将生成相应的 CSS 文件，然后您可以将该文件导入到您的 HTML 文件中，以包含按钮的样式。
创建的 CSS 文件如下所示 -
文件名:index.css
.button:hover {
background-color: black;
color: white;
}
/*# sourceMappingURL=index.css.map */
总结
在本文中，我们了解了什么是 SASS，并使用它为 HTML 按钮元素应用了悬停效果。我们首先编写了 SASS 代码，并将其编译成 CSS 代码。最后，我们将生成的 CSS 代码添加到 HTML 文件中，以便在按钮上应用悬停效果。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
