Placeholder Mixin SCSS/Css

Placeholder Mixin SCSS/CSS

You're looking for the @content directive:

@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 Reference has more information, which can be found here:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

---

As of Sass 3.4, this mixin can be written like so to work both nested and unnested:

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $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;
  }
}

Usage:

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

@include placeholder {
  color: red;
}

Output:

.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;
}

Sass Placeholders from Mixins

Let's look at what happens if you use real classes instead of extend classes

.a {
    .b {
        color: blue;
    }

    @extend .b;
}

Output:

.a .b, .a .a {
  color: blue;
}

The only reason I could imagine you wanting to do this is so you can use the extend class for purposes of extending instead of .classname like so:

.c {
    @extend .b;
}

You'll see that the output probably isn't what you want at all:

.a .b, .a .a, .a .c {
  color: blue;
}

The .a .a doesn't make a whole lot of sense to me either, but it's harmless. What you're actually wanting to do is something like this:

%placeholder-name, .classname {
    property: name;
}

.foo {
    @extend %placeholder-name;
}

And the output will be like this:

.foo, .classname {
  property: name;
}

CSS for placeholders - force SASS to render each selector as separate CSS block

You could easily create a mixin and define the style of all placeholders just once, through a content block passed to the mixin itself, like so:

@mixin placeholder {

    @each $placeholder
        in "::-webkit-input-placeholder",
           ":-moz-placeholder",
           "::-moz-placeholder", 
           ":-ms-input-placeholder" {

        /* for each placeholder in the above list print the browser vendor
           selector, chained with its parent element */

        &#{$placeholder} {
            /* content is replaced with the actual style, passed as a block
               in the mixin inclusion below */

            @content;
        }
    }

}


:focus {
    @include placeholder {
        color: #ccc;
        font-style: italic;
    }
}

This will produce the following output

:focus::-webkit-input-placeholder {
    color: #ccc;
    font-style: italic;
}
:focus:-moz-placeholder {
    color: #ccc;
    font-style: italic;
}
:focus::-moz-placeholder {
    color: #ccc;
    font-style: italic;
}
:focus:-ms-input-placeholder {
    color: #ccc;
    font-style: italic;
}

You can test the sass code on http://sassmeister.com/

---

Related Topics