Placeholder Mixin SCSS CSS

Question

I m trying to create a mixin for placeholders in sass    This is the mixin I ve created    mixin placeholder   css        -webkit-input-placeholder   css     -moz-placeholder             css      -moz-placeholder            css     -ms-input-placeholder        css        This is how I d like to include the mixin    include placeholder font-style italic  color  white  font-weight 100      Obviously this isn t going to work because of all the colons and semi-colons that s being passed through to the mixin  but    I d really like to just input static css and pass it through exactly like the above function    Is this possible

User · Answer

To avoid  Unclosed block  CssSyntaxError  errors being thrown from sass compilers add a     to the end of  content    mixin placeholder        -webkit-input-placeholder    content       -moz-placeholder              content        -moz-placeholder             content       -ms-input-placeholder         content

User · Answer

I use exactly the same sass mixin placeholder as NoDirection wrote  I find it in sass mixins collection here and I m very satisfied with it  There s a text that explains a mixins option more

User · Answer

Why not something like this   It uses a combination of lists  iteration  and interpolation    mixin placeholder   rules        each  rule in  rules         -webkit-input-placeholder       -moz-placeholder        -moz-placeholder       -ms-input-placeholder           nth  rule  1      nth  rule  2                    rules     border    1px solid red               color    green       include placeholder   rules

User · Answer

This is for shorthand syntax   placeholder    amp   -webkit-input-placeholder      content    amp  -moz-placeholder      content    amp   -moz-placeholder      content    amp  -ms-input-placeholder      content   use it like  input    placeholder     color  red

User · Answer

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  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          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

User · Answer

I found the approach given by cimmanon and Kurt Mueller almost worked  but that I needed a parent reference  i e   I need to add the   amp   prefix to each vendor prefix   like this    mixin placeholder        amp   -webkit-input-placeholder   content       amp  -moz-placeholder             content       amp   -moz-placeholder            content       amp  -ms-input-placeholder        content        I use the mixin like this   input        include placeholder           font-family   base-font-family          color  red            With the parent reference in place  then correct css gets generated  e g    input  -webkit-input-placeholder       font-family  Constantia   Lucida Bright   Lucidabright   Lucida Serif   Lucida   DejaVu Serif    Liberation Serif   Georgia  serif      color  red      Without the parent reference   amp    then a space is inserted before the vendor prefix and the CSS processor ignores the declaration  that looks like this   input  -webkit-input-placeholder       font-family  Constantia   Lucida Bright   Lucidabright   Lucida Serif   Lucida   DejaVu Serif    Liberation Serif   Georgia  serif      color  red

[css] Placeholder Mixin SCSS/CSS

Examples related to css

Examples related to sass