如何使用 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 文件中，以便为按钮应用悬停效果。

更新于：2023年2月22日

7K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告