极客笔记如何使用SASS在按钮上应用悬停效果
我们可以使用SASS和:hover CSS选择器在按钮上应用悬停效果。SASS代表Syntactically Awesome Stylesheet，它是一种CSS预处理器，意味着我们可以从相应的SASS代码生成CSS。使用SASS而不仅仅是编写CSS带来了一系列优势，如更易读的代码和易于学习的代码语法，并且我们可以利用这些优势更轻松有效地为Web应用程序中的HTML元素样式化。
在本文中，我们将使用SASS来为按钮元素提供样式。首先，我们将编写一段SASS代码，为悬停时的按钮提供一组样式。然后，我们将使用”sass”编译器生成相应的CSS文件。之后，我们可以在HTML文件中引入生成的CSS文件，并使用其中的样式为按钮元素进行样式化。
示例
在这个示例中，我们将使用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的按钮元素上应用了hover效果。我们首先编写了SASS代码并将其编译为CSS代码。最后，我们将生成的CSS代码包含在HTML文件中，以应用按钮的hover效果。