通过 SASS mixin 和响应式设计创建出理想的输入框-JavaScript中文网-JavaScript教程资源分享门户

通过 SASS mixin 和响应式设计创建出理想的输入框

在前端开发中，输入框是一个常见的元素，我们需要花费很多时间来设计和实现一个好用、美观且响应式的输入框。本文将介绍如何使用 SASS mixin 和响应式设计来创建出理想的输入框。

SASS mixin

SASS 是一种 CSS 预处理器，它提供了许多功能，例如变量、嵌套、函数和 mixin。mixin 是一种定义可重用样式的方式，它允许你将一段 CSS 样式打包成一个可重复使用的代码块。在我们的输入框实现中，我们将使用 mixin 来定义一些重复使用的样式。

首先，我们定义一个 mixin，用于设置输入框外部的容器样式：

@mixin form-element-container {
  display: inline-block;
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
}

这个 mixin 定义了以下样式：

将容器元素设置为 inline-block，使其可以作为输入框组中的一个元素。
设置 position: relative，可以用于绝对定位子元素。
设置容器的宽度为 100%，使其在父元素中完全填充。
设置容器的底边距为 1rem，使其和其他输入框具有一致的垂直间距。

然后，我们定义一个 mixin，用于设置输入框标签的样式：

@mixin form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #7c7c7c;
}

这个 mixin 定义了以下样式：

将标签元素设置为 display: block，使其显示在输入框上面。
设置标签元素的底边距为 0.5rem，使其和输入框之间具有一致的垂直间距。
设置标签元素的字体大小为 0.9rem，使其比输入框的字体稍小。
设置标签元素的字体重量为粗体，使其在输入框中更加突出。
设置标签元素的字母转换为全大写，使其更加易读。
设置标签元素的颜色为 #7c7c7c，作为输入框外观的一部分。

接下来，我们定义一个 mixin，用于设置输入框的样式：

-- -------------------- ---- -------
------ ------------ -
  -------- ------
  ------ -----
  -------- -------- --------
  ---------- -----
  ------------ ----
  ------------ ----
  ------ --------
  ----------------- -----
  ---------------- ------------
  ------- --- ----- --------
  -------------- --------
  ----------- ------------ ----- ------------ ---------- ----- ------------
  ------- -
    ------ --------
    ----------------- -----
    ------------- --------
    -------- --
    ----------- - - - ------ ------- ---- ---- ------
  -
-

这个 mixin 定义了以下样式：

将输入框元素设置为 display: block，使其成为一个块级元素，填充输入框容器的 100% 宽度。
设置输入框元素的内部填充为 0.375rem 0.75rem，与 Bootstrap 的默认输入框样式相同。
设置输入框元素的字体大小为 1rem，与其他文本大小相同。
设置输入框元素的字体重量为普通，使其容易阅读。
设置输入框元素的行高为 1.5，使其与其他元素的行高相同。
设置输入框元素的颜色为 #495057，作为输入框外观的一部分。
设置输入框元素的背景颜色为 #fff，为输入框提供初始背景色。
设置输入框元素的背景剪辑为 padding-box，这将确保元素的背景色只出现在内部填充框中。
设置输入框元素的边框宽度为 1px，颜色为 #ced4da。
设置输入框元素的边框圆角为 0.25rem，使其看起来更圆润。
设置输入框元素的过渡时间为 0.15s，这将确保输入框边框在聚焦或失焦时有动画效果。
设置输入框元素在聚焦时的样式，使其更加突出。

响应式设计

响应式设计是一种让网站适应不同设备和显示器大小的设计技术。在我们的输入框中，我们将使用响应式设计来使输入框在不同的设备上看起来更好。

首先，我们将定义一个 mixin，用于指定输入框容器的最大宽度和居中样式：

@mixin container-max-width($max-width: 960px) {
  max-width: $max-width;
  margin-left: auto;
  margin-right: auto;
}

这个 mixin 允许我们传递一个最大宽度参数，如果没有参数传递，则默认为 960px。它还使用 margin-left: auto 和 margin-right: auto，使其在容器中水平居中。

接下来，我们将定义一个 mixin，用于指定输入框宽度的百分比：

@mixin form-element-width($percentage: 100%) {
  width: $percentage;
}

这个 mixin 允许我们指定一个百分比参数，它默认为 100%，使其在父容器中占据整个宽度。

现在，我们将使用这些 mixin 来创建一个基本的输入框组：

-- -------------------- ---- -------
---- ------------------
  ---- ------------
    ---- ---------------- ----------
      ---- -------------------------------
        ------ ------------ ------------------------ ---------
        ------ ----------- ----------- ---------------------
      ------
    ------
    ---- ---------------- ----------
      ---- -------------------------------
        ------ ------------ ------------------------ ---------
        ------ ----------- ----------- ---------------------
      ------
    ------
    ---- ---------------- ----------
      ---- -------------------------------
        ------ ------------ ------------------------ ---------
        ------ ----------- ----------- ---------------------
      ------
    ------
  ------
------

在上面的代码中，我们使用了 Bootstrap 的网格系统来创建一个包含三个输入框的行，每个占据 12 列在小屏幕设备下，占据 4 列在中等屏幕以上设备下。现在，我们将应用我们定义的 mixin 来设置输入框的样式和宽度：

-- -------------------- ---- -------
---------- -
  -------- ----------------------
-
---- -
  -------- --------------------
-
----------------------- -
  -------- -------------------------
-
----------- -
  -------- -------------
-
------------- -
  -------- -------------------------
  -------- ---------------
-

------ ----------- ------ -
  ------------- -
    -------- ------------------------
  -
-

在上面的代码中，我们使用了 @include 来应用我们定义的 mixin：

container-max-width() mixin 用于将容器元素的最大宽度设置为 960px。
margin-bottom() mixin 用于设置行元素的底边距为 2rem。
form-element-container() mixin 用于设置输入框容器的样式。
form-label() mixin 用于设置输入框标签的样式。
form-element-width() mixin 用于将输入框元素设置为占据父元素的 100% 并进而让其与其他元素等宽。
form-element() mixin 用于指定输入框的样式。

还有一个 @media 查询，它只在设备宽度大于等于 768px 时应用。在这个查询中，我们使用 form-element-width() mixin 将输入框元素的宽度设置为 70%，使其在大屏幕设备上看起来更好。

最终，我们将得到一个美观且响应式的输入框组，如下所示：

总结

在本文中，我们学习了如何使用 SASS mixin 和响应式设计来创建出理想的输入框。通过 SASS mixin，我们定义了可重复使用的样式，使我们的代码更加 DRY。通过响应式设计，我们使输入框在不同设备上看起来更好，提供了更好的用户体验。SASS mixin 和响应式设计是开发高质量输入框组的重要技术，我们可以将其用于其他 UI 元素的设计和实现中。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64d0cb77b5eee0b5257cc5da