如何使用sass/compass缩短此占位符转换CSS选择器?
因此,我决定使用SASS制作一个带有CSS转换的动画搜索框()。我还想制作占位符文本的动画,包括,源代码如下:如何使用sass/compass缩短此占位符转换CSS选择器?,css,css-selectors,sass,compass-sass,Css,Css Selectors,Sass,Compass Sass,因此,我决定使用SASS制作一个带有CSS转换的动画搜索框()。我还想制作占位符文本的动画,包括,源代码如下: 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;
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或compass来缩短/整理此内容?您最好将占位符抽象为一个混音:
@mixin placeholder {
&::-webkit-input-placeholder {
@content;
}
&:-moz-placeholder { /* Firefox 18- */
@content;
}
&::-moz-placeholder { /* Firefox 19+ */
@content;
}
&:-ms-input-placeholder {
@content;
}
}
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;
@include placeholder { color:#DDD; }
}
@include placeholder {
color: #BBB;
transition:color 0.5s ease;
}
}
CSS要求将规则分开。我不认为Sass提供了将一组选择器编译成单独的CSS规则的方法。此外,这些是伪类或伪元素,而不是“伪选择器”。(这就是为什么Mozilla将其从
:-moz占位符
更改为:-moz占位符
——只是因为它作为伪元素更有意义。)