如何在 SASS 中创建占位符的 mixin

htmlweb developmentfront end technology更新于 2024/3/21 20:28:17

概述

占位符是 HTML 输入标签的一个属性，它告诉用户输入标签中需要填充哪些信息。为了设置输入标签占位符的样式，我们将使用 Syntactically Awesome Style Sheets (SASS) 预处理器脚本语言，该语言提供了 mixin 功能。mixin 就像我们在其他编程语言中创建的简单函数。它帮助我们避免在样式表中重复样式。要在我们的程序中使用 SASS mixin，首先我们需要将 SASS 安装到桌面环境中，这将提供使用 mixin 的代码。

语法

在 Sass 中创建 mixin 的语法如下:-

@mixin functionName(arguments…) {
   Styling her....
}

functionName - 函数名可以是任何用户定义的名称，用于定义样式代码块
argument - 参数用于将值作为变量动态传递给函数，该变量将用于设置元素中的样式属性。

算法

步骤 1 - 在文本编辑器中创建一个 HTML 样板。

步骤 2 - 创建一个包含所有输入字段的父 div 容器。

<div style="display: flex;flex-direction: column;width: 20rem;margin: auto;"></div>

步骤 3 - 在父容器内创建一个 HTML 输入字段。

<input type="text">

步骤 4 - 为输入标签添加一个 placeholder 属性并赋值。

<input type="text" placeholder="Full Name">

步骤 5 - 如果要添加更多输入字段，请重复步骤 3 和 4。

步骤 6 - 现在在 style.scss 所在的文件夹中创建一个新文件，使用 @mixin 创建一个 mixin，并在其后添加函数名称。

@mixin placeholderFunction($placecolor) {
}

步骤 7 - 选择 placeholder 伪选择器并使用 CSS 样式属性设置其样式。

&::placeholder {
   color: $placecolor;
}
&::-webkit-input-placeholder{
   color: $placecolor;
}

步骤 8 - 现在选择 mixin 之外的输入字段，并使用 @include 指令调用输入字段内的 mixin，并在其中传递颜色名称。

input[type="text"]{
   @include placeholderFunction(green);
   font-weight: 700;
   margin: 0.2rem 0;
   font-style: italic;
   padding: 0.4rem;
}

步骤 9 − 现在使用以下命令编译 SCSS 文件。

sass style.scss > style.css

步骤 10 − 现在将 style.css 链接到 index.html 代码的 head 标签。

<link rel="stylesheet" type="text/css" href="style.css">

步骤 11 − 在浏览器中打开代码，占位符样式更改将会反映出来。

示例

在给定的示例中，我们创建了一些输入字段，它们包含一个占位符属性，每个输入字段都有特定的值。

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

下图展示了上述 index.html、style.scss 和 style.css 代码的输出。下图展示了四个输入字段，其中的占位符分别为全名、邮箱、密码和确认密码，所有这些占位符均使用 sass mixin 进行样式设置。