如何在 SCSS/CSS 中创建使用冒号和分号的占位符混合？-css教程-PHP中文网

如何在 SCSS/CSS 中创建使用冒号和分号的占位符混合？

DDD

发布： 2024-10-27 04:02:02

原创

743 人浏览过

How to Create a Placeholder Mixin in SCSS/CSS that Works With Colons and Semicolons?

SCSS/CSS 中的占位符混合

您正在寻求为 Sass 中的占位符创建一个 mixin。您设计的 mixin 由于在提供的 CSS 中包含冒号和分号而遇到问题。

幸运的是，Sass 通过 @content 指令提供了解决方案。通过在 mixin 中使用 @content，您可以直接传递静态 CSS，如下所示：

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

@include placeholder {
    font-style:italic;
    color: white;
    font-weight:100;
}

登录后复制

有关更多详细信息，请参阅 Sass 参考：
http://sass-lang。 com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

Sass 3.4 及更高版本

在 Sass 3.4 及更高版本中，您可以使用@可选- at-root mixin 以确保嵌套和非嵌套场景中的功能：

@mixin optional-at-root($sel) {
  @at-root #{if(not &amp;, $sel, selector-append(&amp;, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}

登录后复制

使用和输出

.foo {
  @include placeholder {
    color: green;
  }
}

@include placeholder {
  color: red;
}

登录后复制

这将输出：

.foo::-webkit-input-placeholder {
  color: green;
}
.foo:-moz-placeholder {
  color: green;
}
.foo::-moz-placeholder {
  color: green;
}
.foo:-ms-input-placeholder {
  color: green;
}

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {
  color: red;
}
::-moz-placeholder {
  color: red;
}
:-ms-input-placeholder {
  color: red;
}

登录后复制

以上是如何在 SCSS/CSS 中创建使用冒号和分号的占位符混合？的详细内容。更多信息请关注PHP中文网其他相关文章！