我可以缩写sass中的输入类型吗？

Question

在sass中编写一些代码我发现了这种情况：

input[type="text"]:focus {
   border: 3px solid #AFDDFB;
   transition: 100ms linear;
}

现在我需要覆盖其他类似的输入类型：

input[type="text"]:focus, input[type="password"]:focus, 
input[type="email"]:focus  {
  border: 3px solid #AFDDFB;
  transition: 100ms linear;
}

我需要一些技巧来加快我的写作速度，例如：

input[text, password, email]:focus {
//Dadada
}

有没有办法用sass做到这一点？

Answer 1

预定义属性
我个人追求简短，但它取决于整个代码是否适合它。由你决定。

@mixin focus($types) {
    @each $type in $types {
        &[type=#{$type}]:focus {
            border:3px solid #AFDDFB;
            transition:100ms linear;
        }
    }
}
input {
    @include focus(text email password);
}

Demo Properties

的 @content;
关于Andy F的评论 - 如果你想要一个更灵活的@content;构造，请点击这里。当你有更多不同风格的表格时很有用。不确定，如果你的mixin在你自己的配置文件中或与你上面的代码在同一个文件中。如果您将mixins / functions分开，更容易更改同一文件中的代码而不是打开配置。

@mixin focus($types) {
    @each $type in $types {
        &[type=#{$type}]:focus {
            @content;
        }
    }
}
input {
    @include focus(text email password) {
        border:3px solid #AFDDFB;
        transition:100ms linear;
    }
}

Demo @content;

您可以为url，tel或number添加更多输入类型。如果有用，甚至可以使用submit按钮。