占位符Mixin SCSS / CSS

CSS

Itachi理查德

2020-03-17

我正在尝试为sass中的占位符创建一个mixin。

这是我创建的mixin。

@mixin placeholder ($css) {
  ::-webkit-input-placeholder {$css}
  :-moz-placeholder           {$css}
  ::-moz-placeholder          {$css}
  :-ms-input-placeholder      {$css}  
}

这就是我想要包含mixin的方式：

@include placeholder(font-style:italic; color: white; font-weight:100;);

显然，由于所有冒号和分号都已传递给mixin，因此这行不通，但是...我真的很想输入静态CSS并将其完全传递给上面的函数。

这可能吗？

第1968篇《占位符Mixin SCSS / CSS》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
神乐飞云 2020.03.17

这是速记语法

=placeholder
  &::-webkit-input-placeholder
    @content
  &:-moz-placeholder
    @content
  &::-moz-placeholder
    @content
  &:-ms-input-placeholder
    @content

用起来像

input
  +placeholder
    color: red
Stafan路易 2020.03.17

我使用与NoDirection完全相同的Sass Mixin占位符。我在这里的 sass mixins集合中找到它，对此我感到非常满意。有一段文字说明了mixins选项。

番长Gil 2020.03.17

为了避免从sass编译器抛出“未封闭的块：CssSyntaxError”错误，请添加“;” 到@content的末尾。

@mixin placeholder {
   ::-webkit-input-placeholder { @content;}
   :-moz-placeholder           { @content;}
   ::-moz-placeholder          { @content;}
   :-ms-input-placeholder      { @content;}
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android