How to create a mixin for placeholder in SASS ?

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:

  1. 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.
  2. We use &(SASS Ampersand), it always replaces by the parent CSS selector and reduces the nesting level by 1.
  3. 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.
  4. 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.