scss SCSS输入占位符mixin和用法示例

Posted 2021-05-18

/*********************
PLACEHOLDER STYLING
*********************/

@mixin placeholder {
	$prefixes : (":-webkit-input","-moz",":-moz","-ms-input");
	@each $prefix in $prefixes {
		&:#{$prefix}-placeholder {
			@content;
		}
	}
}

#filter-search-query {
	@include border-radius(0.75em);
	width:100%;
	border:1px solid #d8d8d8;
	padding:0.3em 0.9em;
	@include placeholder { // placeholder usage
		color:#eee;
		font-family:$sans-serif;
		&:before {
			font-family:$icon-font;
			content:$icon-search;
			padding-right:5px;
		}
	}
}