Question

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

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

我目前在.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或{{1}等输入类型}，这就是为什么我没有将它们列为“尚未”。

因此，在我将来需要添加它们的情况下，我将更新您在上面看到的列表。

然而，我的问题是我觉得我在这里重复自己，而且每次为我添加到列表中的每个新输入类型选择项目，复制，粘贴和编辑的工作都是愚蠢的我几乎可以肯定Sass的mixins对此有所帮助。问题是为此创建一个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');

Sass：为输入字段创建mixin

2 个答案: