How to create a mixin for placeholder in SASS ?
Last Updated :
23 Sep, 2020
Mixin is one of the best features of SASS, which works like a function. You can create mixins for repeated CSS properties and then include those mixins using @include in your CSS class.
Approach:
- We create a mixin, we are using @content which let us inject the whole CSS code block inside the mixin, that block replaces @content inside mixin.
- We use &(SASS Ampersand), it always replaces by the parent CSS selector and reduces the nesting level by 1.
- The mixin is ready to use at this time, by using it inside “input” to configure “input” placeholders. We use @include to include mixin followed by content which we want to pass in our mixin. So, we pass the CSS code block having “font-family”, “font-size”, and “color” properties defined for placeholder.
- During the processing of our “.scss” file, @include is replaced by mixin code, @content is replaced by CSS code block that is passed, & is replaced by parent selector each time which is input getting the desired CSS file with code replacement.
SASS file: The following code snippet demonstrates the SASS file with the extension “.scss”.
@mixin placeholder
{
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
input {
@include placeholder {
font-family: robota;
font-size: 20px;
color: red;
font-style: italic;
}
}
Place the above SASS code in “style.scss” file and use the below command to create “style.css” file from the SASS file. The command will only work if you have SASS installed in your system. You can download it from the official website of SASS.
sass style.scss style.css
This will create the “style.css” file in your working directory. The working directory will hold files which are “index.html”,”style.scss” and “style.css”.
CSS code: The following code is the outcome of the above SASS file which when executed is converted to “style.css” file .
input::-webkit-input-placeholder {
font-family: robota;
font-size: 20px;
color: red;
font-style: italic;
}
input:-moz-placeholder {
font-family: robota;
font-size: 20px;
color: red;
font-style: italic;
}
input::-moz-placeholder {
font-family: robota;
font-size: 20px;
color: red;
font-style: italic;
}
input:-ms-input-placeholder {
font-family: robota;
font-size: 20px;
color: red;
font-style: italic;
}
HTML code: The following code demonstrates the “index.html” file.
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<style></style>
<label for="1">Name</label>
<input type="text" placeholder="Name" id="1"/>
<label for="2">Email</label>
<input type="text" placeholder="Email" id="2"/>
<label for="3">Password</label>
<input type="text" placeholder="Password" />
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...