有没有办法在SASS中编写关键帧?
我找到的每个示例实际上都是SCSS,即使它说是SASS也是如此。明确一下,我指的是没有花括号的那一个。
以下是如何在Sass语法中实现CSS关键帧:
@keyframes name-of-animation
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)
这是一个用于添加浏览器前缀的Sass混合宏:
=keyframes($name)
@-webkit-keyframes #{$name}
@content
@-moz-keyframes #{$name}
@content
@-ms-keyframes #{$name}
@content
@keyframes #{$name}
@content
以下是如何在Sass语法中使用mixin的方法:
+keyframes(name-of-animation)
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)
@keyframes name
0%
transform: scale(1)
50%
transform: scale(1.5)
100%
transform: scale(1)
然后使用
.example-btn
animation: name 2s linear infinite
如果您将关键帧存储在其他的.sass文件中,您只需要导入这个文件(包含关键帧),一切都会正常工作。
.scss
不是SASS文件的扩展名格式吗? - Mohammad Kermani