The grunt.js sample in the case of using grunt-styleguide.

grunt.js

module.exports = function(grunt) {
  'use strict';

  grunt.initConfig({
    compass: {
      dev: {
        reference: {
          'htdocs/common/css': 'htdocs/_scss'
        },
        options: {
          config: 'config.rb',
          environment: 'development'
        }
      },
      dist: {
        reference: '<config:compass.dev.reference>',
        options: {
          config: 'config.rb',
          environment: 'production',
          force: true
        }
      }
    },

    styleguide: {
      dist: {
        options: {
          framework: {
              name: 'styledocco'
          },
          name: 'Styleguide',
          include: ['htdocs/common/css/*.css']
        },
        files: {
          'docs/style': 'htdocs/_scss/modules.scss'
        }
      }
    }
  });

  grunt.registerTask('clean', function(dir) {
    require('child_process').exec('rm -rf ' + dir);
  });
  grunt.loadNpmTasks('grunt-compass-multidir');
  grunt.loadNpmTasks('grunt-styleguide');
  grunt.registerTask('makeguide', 'clean:docs/style compass:dev styleguide');
};

test.scss

// # Heading 01
//
// Heading 01モジュールの解説を書く
//
// ```
//    <h1 class="hdg-01">Heading 01</h1>
// ```
//

.hdg-01{
	color: #f00;
	font-size: 18px;
	span{
		font-size: 12px;
	}
}