sass-softlight

Sass::Softlight

SassScript extension to bring the math behind Photoshop's powerful softlight gradient blending mode to Sass, which eliminates the need for manually making softlight gradient backgrounds.

Installation

Add this line to your application's Gemfile:

gem 'sass-softlight'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install sass-softlight

Usage

The script extends Sass's default script functions so you can make a method call to softlight() in your .sass or .scss files as you would with other Sass functions:

	background-image: -webkit-linear-gradient( softlight( $color1, $color2 ), softlight( $color1, $color2 ) )

The softlight method takes to arguments: the source color and the canvas color (in that order). Both colors must be Sass Color objects.

If you want to use the gradient blending mode as it appears in Photoshop then use one color and mix it with white and black using the softlight method:

	background-image: -webkit-linear-gradient( softlight( white, $color2 ), softlight( black, $color2 ) )

NOTE: Gem installing is currently not working. To work around this issue, download sass-softlight.rb and place it in your Rails load path (your_app_dir/lib/ or your_app_dir/config/initializers/). Stop your server and reset your application's cache:

	$ bundle exex rake tmp:clear

Restart your server. The softlight method should compile in the Sass just fine now.

Contributing

1. Fork it
2. Create your feature branch (git checkout -b feature/my-new-feature)
3. Commit your changes (git commit -am 'Added some feature')
4. Push to the branch (git push origin feature/my-new-feature)
5. Create new Pull Request

Credits

Written by Albert Tholen.

Sponsored by Lua Technologies, Inc.

Sources

• Adobe Developer Spec PDF Reference, 3rd Ed., page 414.
• W3C SVG Alpha Compositing Spec