使用 Sass 以可重用的方式设计一组特定的输入类型 [英] Styling a specific set of input types in a reusable way with Sass

问题描述

我想要一个 mixin 函数，它返回 HTML5 输入类型的列表.我想在一个地方管理这个，随着新类型的出现，改变函数，而不是代码中其他地方的所有地方.

I'd like to have a mixin function that returns a list of the HTML5 input types. I'd like to manage this in one place, and as new types come up, change the function, not all the places elsewhere in the code.

问题似乎是 mixin 不是为了返回可以在 CSS 中的花括号之外使用的字符串.这是我的 mixin 示例(当前返回错误)以及我将如何使用它:

The problem seems to be that mixins were not designed to return strings that can be used outside of the curly braces in CSS. Here is an example of my mixin (currently returning errors) and how I'd use it:

/* 
 * Set all the up-and-coming input text types here for easier reference 
 * Does not include types that are not meant to be displayed full width, such as: 
        type=number, type=range, type=date, type=color
 */
@mixin input_text_types( $focus:false ) {
    @if $focus {
        @return #{input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus};
    } @else {
        @return #{input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel]};
    }
}

使用中:

@include input_text_types() {
    width: 80%; 
}

我得到的错误就像 error sass/style.scss(sass/_functions.scss 的第 134 行:...@return #{input": 预期的}"之后的无效 CSS，是[type=text]:foc...")

我已经尝试使用和不使用 @return 指令来格式化输出，并且我已经看到用不同的方式将字符串值括起来(在引号中，单引号中，大括号中哈希).以前有人尝试过做这样的事情吗?

I've tried to format the output with and without the @return directive, and with different ways I have seen to enclose string values (in quotes, in single quote, in the curly braces with the hash). Anyone ever try to do something like this before?

推荐答案

使用变量来包含选择器可能会更好地解决您的问题.通过使用 mixin，您将失去将其与类似元素链接起来的能力.

Your problem might better be solved by using variables to contain your selectors. By using a mixin, you're losing the ability to chain it with similar elements.

$form-input-text: 'input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]';
$form-input-buttons: 'input[type="submit"], input[type="reset"], input[type="button"], button';
$form-input-dates: 'input[type^="date"], input[type="month"], input[type="week"], input[type="time"]';
$form-input-not-radio: 'input:not([type="radio"]):not([type="checkbox"])';

#{$form-input-text}, textarea {
    @include border-radius(.25em);
    border: $form-input-border;
}

#{$form-input-text}, textarea, input[type="file"] {
    width: $form-input-width;
    max-width: 100%;
    -webkit-appearance: textfield
}

#{$form-input-buttons} {
    padding: .25em .5em;
}

这篇关于使用 Sass 以可重用的方式设计一组特定的输入类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！