scss 用Sass加载占位符 Posted 2021-05-17
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 用Sass加载占位符相关的知识,希望对你有一定的参考价值。
<div class='text-input__loading'>
<div class='text-input__loading--line'></div>
<div class='text-input__loading--line'></div>
<div class='text-input__loading--line'></div>
<div class='text-input__loading--line'></div>
<div class='text-input__loading--line'></div>
<div class='text-input__loading--line'></div>
<div class='text-input__loading--line'></div>
<div class='text-input__loading--line'></div>
<div class='text-input__loading--line'></div>
<div class='text-input__loading--line'></div>
</div>
Loading Placeholder with Sass
-----------------------------
A [Pen](https://codepen.io/leerob/pen/XzRzpb) by [Lee Robinson](https://codepen.io/leerob) on [CodePen](https://codepen.io).
[License](https://codepen.io/leerob/pen/XzRzpb/license).
@mixin nth-children($points...) {
@each $point in $points {
&:nth-child(#{$point}) {
@content;
}
}
}
.text-input__loading {
height: 214px;
border: 1px solid lightgrey;
border-radius: 4px;
width: 100%;
&--line {
height: 10px;
margin: 10px;
animation: pulse 1s infinite ease-in-out;
}
div {
@include nth-children(1, 5, 9) {
width: 150px;
}
@include nth-children(2, 6, 10) {
width: 250px;
}
@include nth-children(3, 7) {
width: 50px;
}
@include nth-children(4, 8) {
width: 100px;
}
}
}
@keyframes pulse {
0% {
background-color: rgba(165, 165, 165, 0.1)
}
50% {
background-color: rgba(165, 165, 165, 0.3)
}
100% {
background-color: rgba(165, 165, 165, 0.1)
}
}
以上是关于scss 用Sass加载占位符的主要内容,如果未能解决你的问题,请参考以下文章
scss SASS:跨媒体查询占位符
scss 输入占位符crossbrowser mixin sass
scss 跨浏览器占位符sass mixin
scss 跨浏览器占位符sass mixin
scss 跨浏览器占位符sass mixin
scss sass general mixins响应字体面占位符