简介
SASS 是一种流行的 CSS 预处理器，它可以让你写更优雅和模块化的 CSS。其中，animation 动画是一种在网站和应用程序中添加生动感和视觉效果的方法。本篇文章将分享 SASS 中创建 animation 动画的方法。
基础语法
在 SASS 中，创建 animation 动画需要使用 @keyframes 规则，其中可以定义动画的关键帧，以及属性的变化。例如：
-- -------------------- ---- -------
------ ---------- -
---------- -- -
---- -
---------- ------------ ---
-
-- -
---------- ------------ -------
-
-
---------- -- ---- ----------- ---------
-注意，@keyframes 规则中的 from 和 to 关键帧表示动画的开始状态和结束状态。其他关键帧可以用百分比表示。
animation 属性指定了动画的名称、持续时间、过渡效果和播放状态等。在上述示例中，forwards 参数表示动画结束后保持最后一个关键帧的状态。
混合宏
使用 SASS 的混合宏可以更方便地创建 animation 动画。例如：
-- -------------------- ---- -------
------ ------------------------- -
---------- ------ -
--- ---- ---- ---- ---- -
---------- --------------
-
--- -
---------- --------------------------
-
--- -
---------- ----------------------------
-
-
---------- ------ -- -------- -------
-
----- -
-------- ---------------------
-该示例定义了一个 animate-bounce 混合宏，其使用关键帧描述了一个上下移动的动画，并使用百分比表示关键帧。infinite 表示无限循环播放。
继承
使用 SASS 的继承可以将动画样式应用于多个元素。例如：
-- -------------------- ---- -------
------ ------------- -
---------- ----- -
---- -
---------- ---------
-
-- -
---------- -----------
-
-
---------- ----- ---- -------- ---------
-
------- -
-------- --------------
------- -
-------- ----
-
-
----- -
-------- --------------
-该示例定义了一个 animate-scale 混合宏，其使用 transform 属性描述了一个按钮或卡片在被点击时放大的动画。在 .button 和 .card 中，使用 @include 关键字继承了该混合宏，并在 .button:hover 中添加了额外的 CSS 样式。
结论
使用 SASS，我们可以更方便地创建 animation 动画，使用混合宏和继承提高了代码复用性，减少了代码量，提升了开发效率。“工欲善其事，必先利其器。” 学好 SASS，你会更有信心和能力写好 CSS，提升前端开发技术水平。
参考资料
- Sass: Animation Mixin
- Building a Pure CSS Animated Button with Sass
- Using Sass to create a basic keyframe animation mixin
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704dbf8d91dce0dc8507b78