3

我是 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 提供了一组不错的新输入类型，但现在我不需要添加像date,month或之类的输入类型week，这就是为什么我没有“还”列出它们的原因。

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

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

我在这里和网上寻找类似的东西，但找不到任何东西。

对此的任何帮助将不胜感激。

4

2 回答 2

4

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

他们有一个HTML5 输入类型的“附加组件” （这里是他们创建的 .scss 文件的链接），但它没有: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，当然还有:hoverand: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.scsstextarea ）之外有，但不确定我是否将它们包含在其中，必须考虑一下。select

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

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

如果你们中的任何人有改进 mixin 的建议，请务必让我（我们）知道。

谢谢。

于 2012-11-01T16:57:20.570 回答
1

万一有人出于同样的原因遇到这个问题。为什么不让 SASS 完成这项工作？

代码笔

$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');
于 2019-08-14T21:25:23.677 回答