极客教程CSS 如何用SASS在按钮上应用悬停效果
SASS是Syntactically Awesome Stylesheet的缩写，是一个CSS预处理程序，这意味着人们可以从各自的SASS代码中生成CSS。使用SASS而不是仅仅编写CSS，有其自身的优势，如更可读的代码和易于学习的代码语法，人们可以利用这些来对HTML元素进行样式设计，更容易和有效地在一个Web应用程序中。
在这篇文章中，我们将在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文件中导入这个文件，以包括按钮的样式。
The CSS file that gets created would be like this −
文件名：index.css
.button:hover {
background-color: black;
color: white;
}
/*# sourceMappingURL=index.css.map */
总结
在这篇文章中，我们了解了什么是SASS，并使用它来应用HTML按钮元素的悬停效果。我们首先编写了SASS代码，并将其编译为CSS代码。最后，我们将生成的CSS代码加入到HTML文件中，在按钮上应用悬停效果。