Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create mixin for placeholder in SASS
Overview
A placeholder is an attribute of a HTML input tag, which tells the user about the input tag what information is to be filled in it. To style the placeholder of an input tag we will use the Syntactically Awesome Style Sheets (SASS) preprocessor scripting language in which it provides us with a feature of mixin. A mixin is like a simple function which we create in other programming languages. It helps us to not repeat the styling in the style sheet. To use the SASS mixin with our program firstly we should have to install the SASS to our desktop environment which will provide our code to make use of mixin.
SYNTAX
The syntax to create a mixin in sass is −
@mixin functionName(arguments…) {
Styling her....
}
functionName − A function name can be any user defined name which is used to define the block of styling code
argument − Arguments are used to dynamically pass the value to the function as a variable, which will be used for styling properties in an element.
Algorithm
Step 1 − Create a HTML boilerplate on your text editor.
Step 2 − Create a parent div container which contains all the input fields in it.
<div style="display: flex;flex-direction: column;width: 20rem;margin: auto;"></div>
Step 3 − Create a HTML input field inside the parent container.
<input type="text">
Step 4 − Add a placeholder attribute to the input tag and provide it with a value.
<input type="text" placeholder="Full Name">
Step 5 − If you want to add more input fields then repeat steps 3 and 4.
Step 6 − Now create a new file within the same folder as style.scss, create a mixin using @mixin following up with the function name.
@mixin placeholderFunction($placecolor) {
}
Step 7 − Select the placeholder pseudo selector and style it using the css styling properties.
&::placeholder {
color: $placecolor;
}
&::-webkit-input-placeholder{
color: $placecolor;
}
Step 8 − Now select the input field outside the mixin, and call the mixin inside the input field using the @include directives and pass the color name in it.
input[type="text"]{
@include placeholderFunction(green);
font-weight: 700;
margin: 0.2rem 0;
font-style: italic;
padding: 0.4rem;
}
Step 9 − Now compile the SCSS file using the below command.
sass style.scss > style.css
Step 10 − Now link the style.css to the head tag of the index.html code.
<link rel="stylesheet" type="text/css" href="style.css">
Step 11 − Open the code in your browser and the placeholder styling changes will be reflected.
Example
In the given example, we have created some input fields which contain a placeholder attribute with the specific value to each input field.
<html>
<head>
<title>Mixin Placeholder</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
@mixin placeholderFunction($placecolor) {
&::placeholder {
color: $placecolor;
}
&::-webkit-input-placeholder{
color: $placecolor;
}
}
input[type="text"]{
@include placeholderFunction(green);
font-weight: 700;
margin: 0.2rem 0;
font-style: italic;
padding: 0.4rem;
}
style.css
input[type=text] {
font-weight: 700;
margin: 0.2rem 0;
font-style: italic;
padding: 0.4rem;
}
input[type=text]::placeholder {
color: green;
}
input[type=text]::-webkit-input-placeholder {
color: green;
}
</style>
</head>
<body>
<div style="display: flex;flex-direction: column;width: 20rem;margin: auto;">
<h2>SASS Mixin For Placeholder</h2>
<input type="text" placeholder="Full Name">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<input type="text" placeholder="Confirm Password">
</div>
</body>
</html>
The below image shows the output of the above index.html, style.scss and style.css code. In the below image it shows the four input fields with the placeholder as full name, email, password, confirm password all these placeholders are styled using the sass mixin.
Conclusion
As we can see that sass mixin makes the work easy for developers in writing a single code multiple times and using sass we can create a variable which is good in terms of making changes to the placeholder. So if we want to change the color of the placeholder of the input field then we have to make changes only to a single variable instead of making changes to the whole style sheet.
112 Views
