css 基于SASS的群伪类混合算法

332nm8kg  于 2024-01-09  发布在  其他
关注(0)|答案(1)|浏览(133)

理想情况下,我想创建一个mixin来样式化所有占位符伪类。我不确定这是否可能。下面是我所做的:

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

字符串
理想情况下,可以这样使用:

input {
    &@placeholder(red);
}


这将导致这个CSS:

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

5rgfhyps

5rgfhyps1#

你可以像这样在每个选择器之前添加父选择器&

@mixin placeholder($color) {
    &::-webkit-input-placeholder{
        color: $color;
    }
    &:-moz-placeholder {
        color: $color;
    }
    &::-moz-placeholder {
        color: $color;
    }
    &:-ms-input-placeholder {
        color: $color;
    }
}

字符串
然后将其包含在代码中:

input {
    @include placeholder(red);
}

相关问题