一、啥是骨架屏加载样式
咱平时上网的时候，打开一个网页或者一个 APP，有时候页面不会一下子就完全加载好。这时候，页面上就会先出现一些灰色的框框、线条啥的，这些就是骨架屏。骨架屏就像是一个页面的轮廓，提前给咱展示一下页面大概长啥样，让咱感觉好像页面加载得挺快，不会干等着着急。
骨架屏加载样式其实就是给这些灰色的占位符加上一些动画效果，让它们看起来更生动，比如颜色会有渐变、闪烁啥的。这样能提升用户体验，让用户觉得等待的时间没那么难熬。
二、Sass 是个啥
Sass 是一种 CSS 预处理器，简单来说，它就是在 CSS 的基础上做了一些扩展，让我们写样式的时候更方便。CSS 大家都知道，就是用来给网页添加样式的，但是它有一些局限性，比如不能定义变量、不能写函数啥的。而 Sass 就解决了这些问题，它允许我们使用变量、混合器、嵌套规则等，让代码更简洁、更易维护。
比如说，我们在写 CSS 的时候，可能会多次用到同一个颜色值，像这样：
/* CSS 示例 */
.box1 {
color: #333;
}
.box2 {
color: #333;
}
如果我们用 Sass，就可以先定义一个变量，然后在需要的地方引用这个变量：
/* Sass 示例 */
$text-color: #333;
.box1 {
color: $text-color;
}
.box2 {
color: $text-color;
}
这样如果以后要修改颜色，只需要改变量的值就可以了，不用一个一个去改每个地方的颜色值。
三、混合器与变量在 Sass 里的作用
变量
变量就像是一个容器，我们可以把一些常用的值存到里面，比如颜色、字体大小、间距等。在 Sass 里，变量以 $ 开头。就像上面的例子，我们定义了一个 $text-color 变量，把颜色值 #333 存进去，然后在需要用到这个颜色的地方直接引用这个变量。
混合器
混合器就像是一个函数，我们可以把一些重复的样式代码封装到混合器里，然后在需要的地方调用这个混合器。在 Sass 里，用 @mixin 来定义混合器，用 @include 来调用混合器。
比如，我们经常要给元素添加圆角边框，每次都写 border-radius 很麻烦，这时候就可以用混合器：
/* Sass 混合器示例 */
@mixin rounded-corners {
border-radius: 5px;
}
.box {
@include rounded-corners;
}
这样，.box 元素就会有圆角边框了。
四、用 Sass 实现骨架屏加载样式
1. 定义变量
首先，我们要定义一些变量，比如骨架屏的颜色、动画的持续时间等。
/* Sass 变量定义示例 */
$skeleton-color: #f0f0f0; // 骨架屏的颜色
$animation-duration: 1.5s; // 动画持续时间
2. 创建混合器
接下来，我们创建一个混合器，用来定义骨架屏的动画效果。
/* Sass 混合器示例 */
@mixin skeleton-animation {
background: linear-gradient(90deg, $skeleton-color 25%, #e0e0e0 50%, $skeleton-color 75%);
background-size: 200% 100%;
animation: skeleton-loading $animation-duration infinite;
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
}
这个混合器里，我们用 linear-gradient 创建了一个渐变背景，然后通过 animation 属性给这个背景添加了一个动画，让背景的位置不断移动，从而实现闪烁的效果。
3. 使用混合器和变量
现在，我们就可以在需要的地方使用这个混合器和变量了。
/* Sass 使用混合器和变量示例 */
.skeleton-box {
width: 200px;
height: 100px;
@include skeleton-animation;
}
这样，.skeleton-box 元素就会有骨架屏的动画效果了。
五、应用场景
网页加载
在网页加载的时候，骨架屏可以让用户在等待的过程中不会觉得页面卡死了，提升用户体验。比如电商网站的商品列表页，在数据还没加载好的时候，先显示骨架屏，等数据加载完成后再替换成真实的商品信息。
APP 加载
APP 里也经常会用到骨架屏，比如新闻 APP 在加载新闻列表的时候，先显示骨架屏，等新闻数据加载完成后再显示真实的新闻内容。
六、技术优缺点
优点
- 提高用户体验：骨架屏能让用户在等待页面加载的时候有事情可看，不会觉得无聊，提升了用户体验。
- 代码复用性高：通过 Sass 的变量和混合器，我们可以把骨架屏的样式和动画封装起来，在多个地方复用，减少了代码的重复。
- 易于维护：如果需要修改骨架屏的样式或者动画，只需要修改变量或者混合器的定义就可以了，不用一个一个去修改每个元素的样式。
缺点
- 增加代码量：使用 Sass 会增加一些额外的代码，比如变量和混合器的定义。不过，这些代码可以提高代码的复用性和可维护性，总体来说还是利大于弊的。
- 需要学习成本：如果开发者没有用过 Sass，需要花一些时间来学习 Sass 的语法和特性。
七、注意事项
兼容性
虽然现在大部分浏览器都支持 CSS 的动画效果，但是在一些旧版本的浏览器里可能会有兼容性问题。所以在使用骨架屏动画的时候，要考虑到不同浏览器的兼容性。
性能问题
如果骨架屏的动画效果太复杂，可能会影响页面的性能，导致页面加载变慢。所以在设计动画效果的时候，要尽量简洁，避免使用过于复杂的动画。
八、文章总结
通过 Sass 的变量和混合器，我们可以很方便地创建可复用的骨架屏加载样式和动画效果。变量可以让我们更方便地管理样式的值，混合器可以让我们把重复的样式代码封装起来，提高代码的复用性和可维护性。骨架屏加载样式可以提升用户体验，让用户在等待页面加载的时候不会觉得无聊。不过，在使用的时候要注意兼容性和性能问题。
评论