如何在 SASS 中为占位符创建混合？

Mixin是 SASS 最好的特性之一，它的工作原理就像一个函数。您可以为重复的 CSS 属性创建 mixin，然后在 CSS 类中使用@include包含这些 mixin。

方法：

1. 我们创建了一个mixin，我们使用@content将整个CSS 代码块注入到mixin 中，该块替换了mixin 中的@content 。
2. 我们使用&(SASS Ampersand) ，它总是由父 CSS 选择器替换，并将嵌套级别减少 1。
3. 这个时候mixin就可以使用了，通过在“input”中使用它来配置“input”占位符。我们使用@include来包含mixin，然后是我们想要传入mixin 的内容。因此，我们传递具有为占位符定义的“font-family”、“font-size”和“color”属性的 CSS 代码块。
4. 在我们的“.scss”文件的处理过程中， @ include被mixin 代码替换， @ content被传递的CSS 代码块替换， &每次输入时被父选择器替换，得到所需的CSS 文件，并用代码替换.

SASS 文件：以下代码片段演示了扩展名为“.scss”的 SASS 文件。

@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;
    }
}

将上面的 SASS 代码放在“style.scss”文件中，然后使用下面的命令从 SASS 文件创建“style.css”文件。该命令仅在您的系统中安装了 SASS 时才有效。可以从SASS官网下载。

sass style.scss style.css

这将在您的工作目录中创建“style.css”文件。工作目录将保存“index.html”、“style.scss”和“style.css”文件。

CSS 代码：以下代码是上述 SASS 文件执行时转换为“style.css”文件的结果。

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 代码：以下代码演示了“index.html”文件。

           
        
        
    
    
        
        Name
        
        Email
        
        Password
        
    

输出：