Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create mixin for placeholder in SASS
A mixin in SASS is a reusable block of CSS declarations that can be included throughout your stylesheet. Creating a mixin for placeholder styling helps avoid repetitive code when styling form input placeholders across different browsers.
Placeholder styling requires vendor-specific pseudo-selectors to ensure cross-browser compatibility. Using a SASS mixin centralizes this logic and makes it easily reusable with customizable parameters.
Syntax
Following is the syntax to create a mixin in SASS
@mixin mixin-name($parameter1, $parameter2) {
// CSS properties here
property: $parameter1;
}
To use the mixin, include it with the @include directive
.selector {
@include mixin-name(value1, value2);
}
Creating a Placeholder Mixin
The placeholder mixin needs to target multiple pseudo-selectors for cross-browser support. Here's the basic structure
@mixin placeholder($color, $font-size: 14px, $opacity: 1) {
&::placeholder {
color: $color;
font-size: $font-size;
opacity: $opacity;
}
&::-webkit-input-placeholder {
color: $color;
font-size: $font-size;
opacity: $opacity;
}
&::-moz-placeholder {
color: $color;
font-size: $font-size;
opacity: $opacity;
}
&:-ms-input-placeholder {
color: $color;
font-size: $font-size;
opacity: $opacity;
}
}
Basic Placeholder Mixin Example
Following example demonstrates a simple placeholder mixin with color customization
<!DOCTYPE html>
<html>
<head>
<title>SASS Placeholder Mixin</title>
<style>
/* Compiled CSS from SASS mixin */
input[type="text"] {
padding: 12px;
margin: 8px 0;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
input[type="text"]::placeholder {
color: #888;
font-style: italic;
}
input[type="text"]::-webkit-input-placeholder {
color: #888;
font-style: italic;
}
input[type="text"]::-moz-placeholder {
color: #888;
font-style: italic;
}
.form-container {
max-width: 400px;
margin: 20px auto;
padding: 20px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Contact Form</h2>
<input type="text" placeholder="Enter your full name">
<input type="text" placeholder="Enter your email address">
<input type="text" placeholder="Enter your phone number">
</div>
</body>
</html>
The output shows form inputs with styled placeholder text
Contact Form [Enter your full name ] [Enter your email address] [Enter your phone number ]
Advanced Placeholder Mixin
Following example shows a more advanced mixin with multiple parameters for comprehensive placeholder styling
@mixin placeholder-style($color: #999, $font-size: 14px, $font-weight: normal, $opacity: 1) {
&::placeholder {
color: $color;
font-size: $font-size;
font-weight: $font-weight;
opacity: $opacity;
transition: opacity 0.3s ease;
}
&::-webkit-input-placeholder {
color: $color;
font-size: $font-size;
font-weight: $font-weight;
opacity: $opacity;
transition: opacity 0.3s ease;
}
&::-moz-placeholder {
color: $color;
font-size: $font-size;
font-weight: $font-weight;
opacity: $opacity;
transition: opacity 0.3s ease;
}
&:-ms-input-placeholder {
color: $color;
font-size: $font-size;
font-weight: $font-weight;
opacity: $opacity;
transition: opacity 0.3s ease;
}
}
Usage with Different Input Types
Following example demonstrates how to use the placeholder mixin with various input elements
<!DOCTYPE html>
<html>
<head>
<title>Advanced Placeholder Styling</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 20px auto;
padding: 20px;
}
/* Basic input styling */
input, textarea {
width: 100%;
padding: 12px;
margin: 8px 0;
border: 2px solid #e1e1e1;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
}
/* Different placeholder styles for different inputs */
input[type="email"]::placeholder {
color: #0066cc;
font-style: italic;
}
input[type="password"]::placeholder {
color: #cc6600;
font-weight: bold;
}
textarea::placeholder {
color: #009900;
font-size: 14px;
}
/* Webkit browsers */
input[type="email"]::-webkit-input-placeholder {
color: #0066cc;
font-style: italic;
}
input[type="password"]::-webkit-input-placeholder {
color: #cc6600;
font-weight: bold;
}
textarea::-webkit-input-placeholder {
color: #009900;
font-size: 14px;
}
</style>
</head>
<body>
<h2>Registration Form</h2>
<form>
<input type="text" placeholder="Full Name">
<input type="email" placeholder="Email Address">
<input type="password" placeholder="Password">
<textarea placeholder="Tell us about yourself..." rows="4"></textarea>
</form>
</body>
</html>
Each input type displays placeholders with different colors and styles
Registration Form [Full Name ] (default styling) [Email Address ] (blue, italic) [Password ] (orange, bold) [Tell us about yourself... ] (green, smaller)
Complete SASS Workflow Example
Here's how the complete SASS file would look with the mixin implementation
// SASS file: style.scss
@mixin placeholder($color: #999, $size: 14px) {
&::placeholder {
color: $color;
font-size: $size;
font-style: italic;
}
&::-webkit-input-placeholder {
color: $color;
font-size: $size;
font-style: italic;
}
&::-moz-placeholder {
color: $color;
font-size: $size;
font-style: italic;
}
&:-ms-input-placeholder {
color: $color;
font-size: $size;
font-style: italic;
}
}
.form-input {
@include placeholder(#666, 16px);
padding: 10px;
border: 1px solid #ccc;
}
.email-input {
@include placeholder(blue, 14px);
}
.search-input {
@include placeholder(#888, 12px);
}
The compiled CSS output would be
.form-input {
padding: 10px;
border: 1px solid #ccc;
}
.form-input::placeholder {
color: #666;
font-size: 16px;
font-style: italic;
}
.form-input::-webkit-input-placeholder {
color: #666;
font-size: 16px;
font-style: italic;
}
Browser Compatibility
The placeholder mixin targets different pseudo-selectors for maximum browser support
| Pseudo-selector | Browser Support |
|---|---|
| ::placeholder | Modern browsers (Chrome 57+, Firefox 51+, Safari 10.1+) |
| ::-webkit-input-placeholder | Webkit browsers (Chrome, Safari, older versions) |
| ::-moz-placeholder | Firefox 19+ |
| :-ms-input-placeholder | Internet Explorer 10+, Edge |
Conclusion
SASS mixins for placeholder styling provide a clean, reusable solution for consistent form styling across different browsers. By using parameters, you can easily customize placeholder appearance while maintaining cross-browser compatibility. This approach reduces code duplication and makes maintenance much easier when updating placeholder styles throughout your application.
300 Views
