Making gradients work in Internet Explorer as a SASS mixin

I tend to design with a lot of subtle gradients and use the Ultimate CSS Gradient Generator to create them. It spits out CSS that works in every single browser, and it's awesome.

But when working in SASS, I had a slight problem.

@mixin background($top,$bottom)
background: $top
background: -moz-linear-gradient(top, $top 0%, $bottom 100%)
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom))
background: -webkit-linear-gradient(top, $top 0%,$bottom 100%)
background: -o-linear-gradient(top, $top 0%,$bottom 100%)
background: -ms-linear-gradient(top, $top 0%,$bottom 100%)
background: linear-gradient(top, $top 0%,$bottom 100%)
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='$top', endColorstr='$bottom')
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='$top', endColorstr='#$bottom')"

IE8 wouldn't parse my $top and $bottom values in the filter and -ms-filter properties, leaving them as $top and $bottom in the rendered code. The trick is to escape the variables with #{$value}. Thus:

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#{$top}', endColorstr='#{$bottom}')
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$top}', endColorstr='#{$bottom}')"

I had found this post which came to this conclusion in a more verbose way but thought I'd share my solution as it seems to be easier and quicker.

Facebook is making logical conclusions by merging different data points. So cool.

This is a perfect example of how web applications should work: by gathering data from different places and making logical conclusions.

Last night I attended a friend's surprise party where I met a new friend. We became friends on Facebook during the party. Because we both RSVP'd to the Facebook invitation, Facebook was able to gather that we met at the party and became friends shortly afterwards as a result.

This is how all web applications should be: much more human-like and logical. Kudos to Facebook for building in this kind of logic.

Some computer tasks are still way too difficult

I just went through hell trying to copy two simple videos taken on an iPad to a burned/authored DVD. I didn't think this process would be so hard, but it took me about 2 hours from start to finish, mostly thanks to the fact that Apple no longer ships iDVD for Lion. So without wanting to spend money on any other software, here's the exciting path my afternoon took.

Oh and keep in mind that in the mid 2000's (through high school and some college), I ran a live video production company, so I had all the pro software needed to do the job right (Final Cut Pro, DVD Studio Pro, Premiere Pro, etc.). I bring this up just to say I know how to do this stuff, and it shouldn't be this hard for such a simple task.
  1. Copy video files from iPad to iPhoto on my MacBook Air
  2. Open iMovie, try to import videos from iPhoto. iPhoto wouldn't recognize them.
  3. Copy videos from iPhoto to desktop
  4. Re-open iMovie, add files to project
  5. iMovie imports video files, processing takes 10 minutes
  6. Try to figure out how to get multiple timelines set up in a single project
  7. Got lost in iMovie's mess of projects, timelines, folders (still don't know what they all mean)
  8. Go to export by choosing Export to iDVD, but iDVD is grayed out so I can't click
  9. After much Googling, I discover Apple doesn't provide a version of iDVD that works on OS X Lion
  10. Figured I would use Adobe CS5 on my iMac to burn a DVD instead
  11. Try to copy movie files to iMac. Can't click and drag. Have to set permissions on iMac.
  12. Set permissions, copied movie files to iMac
  13. Go to open Adobe Encore to burn DVD
  14. Discover Adobe doesn't make Mac version of Encore in CS5
  15. Go to copy video files from iMac to Win 7 PC, since I have CS5 on there, too, and assuming Adobe makes a CS5 version of Encore. But iMac can't connect to PC.
  16. Check PC firewall, still can't connect. Try connecting from the PC. Doesn't work. Go back to Mac. Try connecting to PC as server. Fails. Try a few more times from PC. Finally connects. Copy movie files from iMac to PC is successful.
  17. Discover Encore doesn't ship with Adobe CS5 for PC either. (I thought CS5 Master Collection meant you were getting all their production software, not everything but Encore. And Audition.)
  18. Rummage through old email to find what DVD authoring app I bought and used back in the mid 2000's. Find app (DVD-lab), download and install.
  19. Try to import movie files (in .mov) format, but application doesn't support them, since it's a semi-professional DVD authoring app.
  20. Open Adobe Media Encoder, drag files in, choose MPEG2-DVD format. Start encoding.
  21. Drag the exported m2v and wav files into DVD authoring software
  22. Create timelines, drag files to respective timelines
  23. Create simple menu that links to movie tracks
  24. Build DVD files
  25. Burn DVD

So there you have it. After 2 hours, 25 steps, and 3 computers, I finally got these two little videos from an iPad onto a DVD. All thanks to the fact that Apple is trying to kill the DVD format, and thus decided killing their iDVD authoring software would be a good idea. Thanks, Apple!