占位符Mixin SCSS / 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并将其完全传递给上面的函数。

这可能吗？

神乐飞云2020/03/17 18:09:19

这是速记语法

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

用起来像

input
  +placeholder
    color: red

Stafan路易2020/03/17 18:09:18

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

番长Gil2020/03/17 18:09:18

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

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer