Sass：为输入字段创建 mixin

Question

我是 Sass 新手，所以我需要帮助来为我的输入字段创建混合。

但是，如果有人知道已经为此制作的 mixin，或者如果 Compass 有一个可以完成此操作的 mixin，请告诉我（我们）。

我的 .scss 文件中目前有以下 CSS 规则：

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea, 
select { ... }

input[type="text"]:hover,
input[type="text"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="search"]:hover,
input[type="search"]:focus,
input[type="url"]:hover,
input[type="url"]:focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus  { ... }

现在，我们知道 HTML5 提供了一组不错的新 input types，但现在我不需要添加像 date、month 或 week 这样的输入类型，这就是为什么我不需要让他们“还”列出来。

因此，如果我以后需要添加它们，我会更新您在上面看到的列表。

但是，我的问题是我觉得我在这里重复自己，另外，每次为我添加到列表中的每种新输入类型选择项目、复制、粘贴和编辑的工作都是愚蠢的，而且我几乎可以肯定 Sass 的 mixin 可以对此有所帮助。问题是为此创建一个 mixin 真的让我很困惑。

我在这里和网络上四处寻找类似的东西，但没有找到任何东西。

非常感谢任何帮助。

Answer 1

好的，我终于找到了 Sass 混合库 Bourbon。

他们有一个 HTML5 input types 的“附加组件”（这是他们创建的 link to the .scss file），但它没有 :hover 或 :focus 伪元素。所以我添加了它们。

老实说，我不知道我所做的是否是编写这个 mixin 的最佳方式，但它的效果非常好：

//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
// http://diveintohtml5.org/forms.html
//************************************************************************//
$inputs-list: 'input[type="email"]',
              'input[type="number"]',
              'input[type="password"]',
              'input[type="search"]',
              'input[type="tel"]',
              'input[type="text"]',
              'input[type="url"]',

              // Webkit & Gecko may change the display of these in the future
              'input[type="color"]',
              'input[type="date"]',
              'input[type="datetime"]',
              'input[type="datetime-local"]',
              'input[type="month"]',
              'input[type="time"]',
              'input[type="week"]';

$unquoted-inputs-list: ();

@each $input-type in $inputs-list {
  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
}

$all-text-inputs: $unquoted-inputs-list;

// You must use interpolation on the variable:
// #{$all-text-inputs}
//************************************************************************//
//   #{$all-text-inputs}, textarea {
//     border: 1px solid red;
//   }

// :hover and :focus pseudo elements
// Added by Ricardo Zea
// http://ricardozea.net
// @ricardozea
// Tracking: http://stackoverflow.com/questions/13180807/sass-create-mixin-for-input-fields

$inputs-list-hf:'input[type="email"]:hover',
                'input[type="number"]:hover',
                'input[type="password"]:hover',
                'input[type="search"]:hover',
                'input[type="tel"]:hover',
                'input[type="text"]:hover',
                'input[type="url"]:hover',
                'input[type="color"]:hover',
                'input[type="date"]:hover',
                'input[type="datetime"]:hover',
                'input[type="datetime-local"]:hover',
                'input[type="month"]:hover',
                'input[type="time"]:hover',
                'input[type="week"]:hover',

                'input[type="email"]:focus',
                'input[type="number"]:focus',
                'input[type="password"]:focus',
                'input[type="search"]:focus',
                'input[type="tel"]:focus',
                'input[type="text"]:focus',
                'input[type="url"]:focus',
                'input[type="color"]:focus',
                'input[type="date"]:focus',
                'input[type="datetime"]:focus',
                'input[type="datetime-local"]:focus',
                'input[type="month"]:focus',
                'input[type="time"]:focus',
                'input[type="week"]:focus';

$unquoted-inputs-list-hf: ();

@each $input-type-hf in $inputs-list-hf {
  $unquoted-inputs-list-hf: append($unquoted-inputs-list-hf, unquote($input-type-hf), comma);
}

$all-text-inputs-hf: $unquoted-inputs-list-hf;

// You must use interpolation on the variable:
// #{$all-text-inputs-hf}
//************************************************************************//
//   #{$all-text-inputs-hf}, textarea {
//     border: 1px solid red;
//   }

如您所见，我复制并粘贴了原始混音并将前缀 -hf 以及 :hover 和 :focus 添加到新规则中。

在我的 .scss 文件中，我添加了这个 @import：

@import "html5-input-types";（不需要下划线_或文件扩展名.scss）

在我的 .scss 文件的“表单”部分，我添加了以下规则：

/*Normal state*/
#{$all-text-inputs}, 
textarea,
select { ... }

/*:hover and :focus states*/
#{$all-text-inputs-hf}, 
textarea:hover, 
textarea:focus,
select:hover,
select:focus { ... }

我知道我在 mixin 文件 (html5-input-types.scss) 之外有 textarea 和 select，但还不确定我是否将它们包含在其中，必须考虑一下。

无论如何，这对我来说效果很好，尽管如果将来有任何变化，我仍然需要更新 html5-input-types.scss，但至少我正在处理这些输入字段比以前更有效率。

希望我在这里所做的可以帮助其他人。

如果你们有任何改进 mixin 的建议，请务必告诉我（我们）。

谢谢。

Answer 2

以防有人出于与我相同的原因遇到此问题。为什么不让 SASS 完成这项工作？

CodePen

$form-background: #f8f8f8;
$form-color: #000;
$form-border: 1px solid lighten($form-color, 50%);

$form-focus-background: darken($form-background, 10%);
$form-focus-color: #999;
$form-focus-border: 1px solid $form-color;

%input-styles {
    width: 15em;
    min-height: 30px;
    margin: 0 0 15px 15px;
    background: $form-background;
    color: $form-color;
    border: $form-border;
    transition: .2s ease-in-out;
    transition-property: color, background-color, border;
}

%input-styles--focus {
    background-color: $form-focus-background;
    color: $form-focus-color;
    border: $form-focus-border;
}

@mixin input-styles($styles, $focus_styles) {
    $types: 'email', 'number', 'radio', 'password', 'search', 'tel',
            'text', 'url', 'color', 'date', 'datetime',
            'datetime-local', 'month', 'time', 'week';

    @each $type in $types {
        input[type="#{$type}"] {
            @extend #{$styles};

            &:focus {
                @extend #{$focus_styles};
            }
        }
    }

    select,
    textarea {
        @extend #{$styles};

        &:focus {
            @extend #{$focus_styles};
        }
    }
}

@include input-styles('%input-styles', '%input-styles--focus');