1_template.php

<?php

// Add the css file as you would have added a normal 
// css file in template.php, but pass the path 
// through cssdry_stylesheet().

if (module_exists('cssdry')) {
  drupal_add_css(cssdry_stylesheet(drupal_get_path('theme', 'a_theme') .'/css/style.css'), 'theme');
}

2_style.css

/*
 * style.css: This is the stylesheet we added 
 * in the template.
 */

/* 
 * Define a constant that can be used in the
 * included stylesheets.
 */
$border_color=#000;

/* 
 * Import stylesheets, the import is done serverside and
 * presented to the client as a single stylesheet.
 */
@import url("header.css");
@import url("footer.css");

3_header.css

/*
 * header.css: The dry stylesheet for our header, 
 * note the nesting of selectors.
 */
#header {
  ul { margin: 0; padding: 0; text-align: left; }
  li { float: left; padding: 0 0 0 10px; }

  #primary {
    position: absolute;
    right: 0;
    bottom: 25px;

    li {
      border-right: 1px solid $border_color;
      padding: 0 10px 3px 10px;
    }
    li.last {
      border: none;
      padding: 0 0 0 10px;
    }
    li a {
      float: left;
      height: 27px;
      text-indent: -9999px;
      outline: none;
    }

    .menu-257  {
      a { background: url(../img/menu.png) 0px top no-repeat; width: 65px; }
      a:hover, a.active { background: url(../img/menu.png) 0px bottom no-repeat; }
    }
    .menu-258 {
      a { background: url(../img/menu.png) -65px top no-repeat; width: 73px; }
      a:hover, a.active { background: url(../img/menu.png) -65px bottom no-repeat; }
    }
    .menu-259 {
      a { background: url(../img/menu.png) -138px top no-repeat; width: 65px; }
      a:hover, a.active { background: url(../img/menu.png) -138px bottom no-repeat; }
    }
    .menu-260 {
      a { background: url(../img/menu.png) -203px top no-repeat; width: 157px; }
      a:hover, a.active { background: url(../img/menu.png) -203px bottom no-repeat; }
    }
    .menu-261 {
      a { background: url(../img/menu.png) -360px top no-repeat; width: 83px; }
      a:hover, a.active { background: url(../img/menu.png) -360px bottom no-repeat; }
    }
  }

  #secondary {
    position: absolute;
    right: 0;
    top: 15px;
    text-transform: uppercase;
    font-size: .8em;
  }
}

4_footer.css

/*
 * footer.css: The dry stylesheet for our footer, 
 * note the use of the $border_color constant.
 */
#footer {
  position: relative;
  margin: 15px 0 0 0;
  padding: 15px 0 0 0;
  border-top: 4px solid $border_color;
  font-size: .9em;
  
  .block {
    float: left;
    width: 169px;
    padding: 0 15px 0 0;
  }

  .menu {
    margin: 0; 
    
    li { 
      list-style-image: url(../img/bullet.png); 
      list-style-type: none; 
    }
  }
}

5_result.css

/*
 * And finally, the result. This css-file gets stored at something like 
 * your_files_dir/cssdry/c539e073a89fa113c3337dfcb423ffeb.css
 * ...where c539e073a89fa113c3337dfcb423ffeb is the md5 of the realpath()
 * of the css-file. The processed css is updated when the root css 
 * (style.css) is modified.
 */
#header ul{margin: 0; padding: 0; text-align: left;}
#header li{float: left; padding: 0 0 0 10px;}
#header #primary{position: absolute; right: 0; bottom: 25px;}
#header #primary li{border-right: 1px solid #000; padding: 0 10px 3px 10px;}
#header #primary li.last{border: none; padding: 0 0 0 10px;}
#header #primary li a{float: left; height: 27px; text-indent: -9999px; outline: none;}
#header #primary .menu-257 a{background: url(/sites/default/themes/a_theme/css/../img/menu.png) 0px top no-repeat; width: 65px;}
#header #primary .menu-257 a:hover,#header #primary .menu-257 a.active{background: url(/sites/default/themes/a_theme/css/../img/menu.png) 0px bottom no-repeat;}
#header #primary .menu-258 a{background: url(/sites/default/themes/a_theme/css/../img/menu.png) -65px top no-repeat; width: 73px;}
#header #primary .menu-258 a:hover,#header #primary .menu-258 a.active{background: url(/sites/default/themes/a_theme/css/../img/menu.png) -65px bottom no-repeat;}
#header #primary .menu-259 a{background: url(/sites/default/themes/a_theme/css/../img/menu.png) -138px top no-repeat; width: 65px;}
#header #primary .menu-259 a:hover,#header #primary .menu-259 a.active{background: url(/sites/default/themes/a_theme/css/../img/menu.png) -138px bottom no-repeat;}
#header #primary .menu-260 a{background: url(/sites/default/themes/a_theme/css/../img/menu.png) -203px top no-repeat; width: 157px;}
#header #primary .menu-260 a:hover,#header #primary .menu-260 a.active{background: url(/sites/default/themes/a_theme/css/../img/menu.png) -203px bottom no-repeat;}
#header #primary .menu-261 a{background: url(/sites/default/themes/a_theme/css/../img/menu.png) -360px top no-repeat; width: 83px;}
#header #primary .menu-261 a:hover,#header #primary .menu-261 a.active{background: url(/sites/default/themes/a_theme/css/../img/menu.png) -360px bottom no-repeat;}
#header #secondary{position: absolute; right: 0; top: 15px; text-transform: uppercase; font-size: .8em;}
#footer{position: relative; margin: 15px 0 0 0; padding: 15px 0 0 0; border-top: 4px solid #000; font-size: .9em;}
#footer .block{float: left; width: 169px; padding: 0 15px 0 0;}
#footer .menu{margin: 0;}
#footer .menu li{list-style-image: url(/sites/default/themes/a_theme/css/../img/bullet.png); list-style-type: none;}