base.css

/* 
 * This is my app's main CSS, with custom styles in addition to those provided by the JQuery UI CSS framework.
 * I need to use the framework's .ui-state-hover as a mixin in one of my styles here.
 * Currently, I am solving this problem using JQuery...
 */

ul.navigation li a:hover {
  /* 
  * mix in .ui-state-hover 
  * other styles
  */
}

jquery-ui-1.7.2.custom.css

/* public/stylesheets/theme1/jquery-ui-1.7.2.custom.css
 * Contains styles from JQuery UI's ThemeRoller/CSS Framework.
 * http://jqueryui.com/themeroller/
 * There will be other "themes" under different directories: theme2, theme3, etc.
/*

/* <snip> */
.ui-state-default .ui-icon { background-image: url(images/ui-icons_e0fdff_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_056b93_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_f5e175_256x240.png); }
/* <snip> */

Problems.markdown

There's a couple of problems:

1. I can't modify JQuery UI's CSS file to create the mixin. Therefore it seems that SASS syntax is a no go. This is what drove me toward lesscss.
2. In less, the class must exist within the same file as where the mixin is used. In other words, the only way to make this work was to @import the JQuery UI theme into the base.css file. This is not an option, as one of the objectives is to allow the user to select a theme dynamically (for example: using http://jqueryui.com/docs/Theming/ThemeSwitcher)

Sass will support cross-file selectors-as-mixins soon, as well as some sort of syntax that is as CSS-compatible as possible. For now, though, I don't see a great solution... your best bet, if you wanted to spend some effort, would probably be to hack something together with css2sass.