所以我决定使用 SASS 制作一个带有 CSS 转换的漂亮的动画搜索框(演示)。我还想为占位符文本设置动画,其中涉及四个不同的 pesudo-classes,源现在看起来像这样:
input {
background-image:url(search.png);
background-repeat:no-repeat;
background-size:20px 20px;
background-position-x:12px;
background-position-y:10px;
background-color:#6E597E;
box-shadow:0 0 5px #333 inset;
border-radius:15px;
border:0;
padding:8px 10px 10px 45px;
font-size:20px;
font-weight:300;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color:#BBB;
width:100%;
transition:all 0.5s ease;
&:focus {
outline:none;
box-shadow:0 0 10px #333 inset;
background-color:#85699A;
color:#EEE;
&::-webkit-input-placeholder { color:#DDD; }
&:-moz-placeholder { color:#DDD; }
&::-moz-placeholder { color:#DDD; }
&:-ms-input-placeholder { color:#DDD; }
}
&::-webkit-input-placeholder {
color: #BBB;
transition:color 0.5s ease;
}
&:-moz-placeholder { /* Firefox 18- */
color: #BBB;
transition:color 0.5s ease;
}
&::-moz-placeholder { /* Firefox 19+ */
color: #BBB;
transition:color 0.5s ease;
}
&:-ms-input-placeholder {
color: #BBB;
transition:color 0.5s ease;
}
}
有没有办法使用 SASS 或指南针来缩短/整理它?