I am using the redux framework for wordpress.
This works but I am wondering if there's a way to make it so that the style won't be inline. I have looked at the redux compiler and couldn't see anything about using variables in gradients/supporting multiple browsers.
From what I read you can only assign a variable to simple css attributes like color, background colour which only required a single variable.
<?php
$topbar_from = $ffresh_theme['opt-gradient-topbar']['from'];
$topbar_to = $ffresh_theme['opt-gradient-topbar']['to']; ?>
<div class="contactinfo" style="/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(<?php echo $topbar_from; ?>), to(<?php echo $topbar_to; ?>));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, <?php echo $topbar_from; ?>, <?php echo $topbar_to; ?>);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, <?php echo $topbar_from; ?>, <?php echo $topbar_to; ?>);
/* IE 10 */
background: -ms-linear-gradient(top, <?php echo $topbar_from; ?>, <?php echo $topbar_to; ?>);
/* Opera 11.10+ */
background: -o-linear-gradient(top, <?php echo $topbar_from; ?>, <?php echo $topbar_to; ?>);">`
I'll be posting an article soon on how to integrate SCSS into a theme. That makes it much easier. ;)