SCSS 是Sass的一种强大语法，它扩展了 CSS 的功能，使创建动态且可自定义的样式变得更加容易。为了更好地理解 SCSS 的应用，我们将演示如何创建一个漂亮的悬停效果，当鼠标悬停在元素上时，元素会呈现出填充的效果。我们将解释实现过程和自定义选项，并为 SCSS 代码提供上下文。

 

HTML结构

在深入了解 SCSS 的神奇之处之前，让我们先为按钮定义一个简单的 HTML 结构。

<div class=”buttons”>
<h1>
Simple hover effects with <code>box-shadow</code>
</h1>
<button class=”fill”> Fill In</button>
</div>

在这个代码片段中，我们有一个button带有类名的元素fill。这个类名将在我们的 SCSS 代码中用于定义悬停效果。

 

使用 SCSS 制作悬停效果

现在，让我们深入研究 SCSS 代码，并阐明悬停效果的关键部分。在这里，我们应用了各种 SCSS 规则和 CSS 自定义属性来创建引人入胜的视觉效果。

/* Base styling for the button */
button {
–color: #a972cb; /* Button color */
–hover: #ef6eae; /* Hover color */
color: var(–color); /* Applying the color */
background: none;
border: 2px solid var(–color); /* Border with the color of the button */
font: inherit;
line-height: 1;
margin: 0.5em;
padding: 1em 2em;
transition: 0.25s; /* Transition time */
}

/* Styling for button hover/focus state */
button:hover,
button:focus {
color: #fff; /* White text on hover */
border-color: var(–hover); /* Border color change on hover */
box-shadow: inset 0 0 0 2em var(–hover); /* Inset box-shadow to create a fill effect */
}

选择器button定义了按钮的默认样式。我们使用 CSS 自定义属性（`color`--color和--hover`hover`）来设置按钮的颜色方案及其悬停状态。`color`transition属性允许我们为这些属性的变化添加动画效果，从而在悬停时创建平滑的填充效果。

当鼠标悬停或获得焦点时，我们会更新按钮的文本color，border-color并应用一个动画inset box-shadow来模拟填充效果。此变化以 0.25 秒的动画时间呈现，具体时间由选择器transition中的属性指定button。

 

页面样式总结

为了更直观地展示效果，我们添加了一些页面样式。但请记住，这些样式是针对此特定示例而设计的，在实际应用中，应根据您的实际需求进行调整。

/* Page styling */
body {
color: #fff;
background: hsl(227, 10%, 10%);
font: 300 1em ‘Fira Sans’, sans-serif;
justify-content: center;
align-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
display: flex;
}

/* Heading styling */
h1 {
font-weight: 400;
}

选择body器样式包括网页的字体、文本对齐方式和配色方案。该h1选择器用于设置标题的字体粗细。

现在，当鼠标悬停在“填写”按钮上时，我们就可以看到实际效果了。

要调整悬停效果以适应您网站的美学风格，只需修改 `<hover>`--color和--hover`<background>` CSS 变量即可。选择配色方案时，请务必考虑无障碍设计原则，因为按钮颜色和背景颜色之间的对比度对于提高可读性至关重要。圆角（通过 `<color>`border-radius属性设置）越来越受欢迎，其柔和的视觉效果也有助于提升用户体验。