如何使用 SASS 在按钮上应用悬停效果？

动画使用户体验更加美丽和令人印象深刻。通过使用 HTML（超文本标记语言）元素和 SASS（Syntactically Awesome Stylesheet），我们将设计为它们提供彩色边框和动画效果的按钮。我们将使用Sass ，因为它可以更好地替代 CSS 和 CSS 的超集。 Sass为所有浏览器提供 100% 的兼容性，并通过编译的 CSS 文件提供更好的语法。 Sass提供了两个文件扩展名“ SCSS ”（Sassy Css）和“ SASS ”（缩进语法）。我们将使用SCSS扩展和SCSS的各种功能。

方法：我们将介绍按钮元素并给出HTML页面的结构。我们将使用Sass的特性为它们提供样式、使用线性渐变的边框设计和动画效果。

分步实施：

第 1 步：首先，我们将使用 HTML 的按钮标签设计简单的按钮。我们将从创建一个HTML文件开始。在 HTML 头标签内，我们将包含元链接和外部文件以包含后备字体。在 body 标签内，我们将包含属性、类和 Id，为它们提供设计和按钮标签，使其可点击。

HTML

  

    
    
    
    

  

    

        

            
                Button 1
            
        
        

            
                Button 2
            
        
    

第 2 步：我们将创建一个文件扩展名为.scss的SCSS文件。我们将包括SCSS的各种功能。以 '$' 美元符号开头并以分号结尾的变量作为在单个位置更改属性而不是在整个代码中搜索的更好工具，嵌套包括父类，我们还将使用扩展元素这有助于继承元素的属性。

SCSS代码：

索引.scss

/* Declaring variables */
$range: 88vh;
$background_color: #f3f3f3;
$text-color: black;
  
/* Declaring a mixin function by 
   passing a actual argument */
@mixin center($align) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $align;
}
*,
*::before,
*::after {
  padding: 0px;
  margin: 0px;
  box-sizing: inherit;
}
  
.container {
  
  /* Calling a mixin function name center
     by passing row as a information to
     it's actual argument */
  @include center(row);
  
  /* Accessing variable using a '$' dollar sign */
  height: $range;
  button {
    border: none;
    @include center(row);
    box-sizing: border-box;
    cursor: pointer;
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 2px;
    width: 200px;
    height: 46px;
    background-color: $background_color;
    color: $text-color;
    font-family: "Cormorant", "Garamond";
    margin-left: 23px;
    border-radius: 24px;
  }
  
  .border_btn1 {
    width: 200px;
    height: 44px;
    padding: 3px;
    border-radius: 41px;
    margin-left: 21px;
  }
  .border_btn1_animate {
    background: linear-gradient(
      to left,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
    );
  }
  
  #{&}_button1 {
    margin-left: 0px;
    height: 44px;
    display: inline-block;
    position: relative;
  }
  .border_btn2 {
    width: 200px;
    height: 44px;
    padding: 3px;
    border-radius: 41px;
    margin-left: 21px;
  }
  .border_btn2_animate {
    background: linear-gradient(
      to right,
      chartreuse,
      #6161fd,
      #fd31fd,
      #ffb03a,
      red
    );
  }
  
  #{&}_button2 {
  
       /* Inheriting the properties 
          of container_button1 */
       @extend .container_button1;
  }
}
.btn1-hover:hover:before,
.btn2-hover:hover:before {
  position: absolute;
  left: 0px;
  top: 0px;
  line-height: 2.1;
  min-width: 49px;
  font-size: 100%;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.1);
}
  
.btn1-hover:hover:before,
.btn2-hover:hover:before {
  content: url("");
}
.btn1-hover-animate:hover:before,
.btn2-hover-animate:hover:before {
  transition: width 0.5ms ease-in-out;
  animation: change 1s forwards 1;
}
  
@keyframes change {
  0% {
    width: 1px;
  }
  100% {
    width: 200px;
  }
}

第 3 步：使用SCSS编译 CSS 或级联样式表。 SCSS最好的一点是它为编译后的 CSS 提供了浏览器支持，这使得它可以跨主流浏览器兼容。

我们使用 CSS 灵活的框布局使按钮显示为居中，线性渐变为按钮的边框提供渐变的触感，然后是“向左”方向指示颜色开始。动画和关键帧用于显示光标在按钮上时的效果，添加动画速记属性' animation:change 1s forwards 1 '后跟animation-name-change,animation-delay-function:1s,animation-fill-mode : forwards (在最后一个关键帧之后停止动画) animation-iteration-count-function: 1 .

当悬停按钮背景颜色的不透明度时，它会根据使用 CSS 关键帧实现的按钮宽度，将宽度从 1px 略微增加到 200px。不允许对 CSS 文件进行任何更改，因为它会自动将 SASS 或 SCSS 文件编译为 CSS。

编译的 CSS 代码：

索引.css

/* Declaring variables */
/* Declaring a mixin function by passing a actual argument */
*,
*::before,
*::after {
  padding: 0px;
  margin: 0px;
  box-sizing: inherit;
}
  
.container {
  /* Calling a mixin function name center by 
     passing row as a information
     to it's actual argument */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  /* Accessing variable using a '$' dollar sign */
  height: 88vh;
}
.container button {
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 2px;
  width: 200px;
  height: 46px;
  background-color: #f3f3f3;
  color: black;
  font-family: "Cormorant", "Garamond";
  margin-left: 23px;
  border-radius: 24px;
}
.container .border_btn1 {
  width: 200px;
  height: 44px;
  padding: 3px;
  border-radius: 41px;
  margin-left: 21px;
}
.container .border_btn1_animate {
  background: linear-gradient(
    to left,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}
.container .container_button1,
.container .container_button2 {
  margin-left: 0px;
  height: 44px;
  display: inline-block;
  position: relative;
}
.container .border_btn2 {
  width: 200px;
  height: 44px;
  padding: 3px;
  border-radius: 41px;
  margin-left: 21px;
}
.container .border_btn2_animate {
  background: linear-gradient(
    to right,
    chartreuse,
    #6161fd,
    #fd31fd,
    #ffb03a,
    red
  );
}
.container .container_button2 {
  /* Inheriting the properties of container_button1 */
}
  
.btn1-hover:hover:before,
.btn2-hover:hover:before {
  position: absolute;
  left: 0px;
  top: 0px;
  line-height: 2.1;
  min-width: 49px;
  font-size: 100%;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.1);
}
  
.btn1-hover:hover:before,
.btn2-hover:hover:before {
  content: url("");
}
  
.btn1-hover-animate:hover:before,
.btn2-hover-animate:hover:before {
  transition: width 0.5ms ease-in-out;
  animation: change 1s forwards 1;
}
  
@keyframes change {
  0% {
    width: 1px;
  }
  100% {
    width: 200px;
  }
}

输出：