search

madebysource / lesshat

Smart LESS CSS mixins library.
lesshat.com
MIT License
2.19k stars 258 forks source link

Add mixin for applying linear-gradient as background #62

Closed skotchio closed 10 years ago

skotchio commented 10 years ago

I need to define the following css styles:

  p  {
     background: -moz-linear-gradient(top,  rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
     background: -webkit-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
     background: -o-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
     background: -ms-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
     background: linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
  }

But I can't find mixin for this purpose. May you add this one?

marekhrabe commented 10 years ago

Hey Lary, you can totally use .background-image mixin. Just like this:

p {
    .background-image(linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%));
}

We prefer to use oficial css naming for mixins over some magical .linear-gradient and similar we saw elsewhere. I hope this helps you :)

skotchio commented 10 years ago

Oh. Thank you very much for the help. It works for me well!