The full automatic way#

This is the simplest way to use, you will let the serializer automatically describe every reference rules existing within the CSS manifest.

Write a Sass file that will use the helpers and settings to build a CSS manifest:

@charset "UTF-8";

@import "settings";

@import "styleguide_helpers";

$pycssstyleguide-compiler-support: "libsass";

.styleguide-metas-compiler {
    --support: "#{$pycssstyleguide-compiler-support}";
}

.styleguide-metas-references {
    --auto: "true";
}

.styleguide-reference-palette {
    --structure: "flat";
    --keys: "#{get-names($palette)}";
    --values: "#{get-values($palette)}";
}

.styleguide-reference-schemes {
    --structure: "nested";
    --splitter: "object-list";
    --keys: '#{get-names-to-json($schemes-colors)}';
    --selector: '#{get-names-to-json($schemes-colors, '.bg-')}';
    --background: '#{get-props-to-json($schemes-colors, 'background')}';
    --font_color: '#{get-props-to-json($schemes-colors, 'font-color')}';
}

.styleguide-reference-borders {
    --structure: "nested";
    --keys: "#{get-names($borders)}";
    --size: "#{get-props($borders, 'size')}";
    --style: "#{get-props($borders, 'style')}";
    --color: "#{get-props($borders, 'color')}";
}

.styleguide-reference-gradients {
    --structure: "object-complex";
    --object: '["#{to-string(map-values($gradients), $glue: '", "')}"]';
}

.styleguide-reference-grid_cell_sizes {
    --structure: "flat";
    --keys: "#{floor-number-items($grid-cell-sizes)}";
    --values: "#{to-string($grid-cell-sizes, $glue: ' ')}";
}

.styleguide-reference-grid_cell_total {
    --structure: "number";
    --value: #{$grid-cell-total};
}

.styleguide-reference-spaces {
    --structure: "list";
    --items: "#{to-string($spaces, $glue: ' ')}";
}

.styleguide-reference-version {
    --structure: "string";
    --value: "#{$version}";
}

Note

From styleguide-metas-references we require to serialize every existing references with the simple rule --auto: "true".

Build CSS manifest with your Sass compiler and you should get:

/* Helper functions from py-css-styleguide==1.0.0 */
.styleguide-metas-compiler {
  --support: "libsass";
}

.styleguide-metas-references {
  --auto: "true";
}

.styleguide-reference-palette {
  --structure: "flat";
  --keys: "black white grey";
  --values: "#000000 #ffffff #404040";
}

.styleguide-reference-schemes {
  --structure: "nested";
  --splitter: "object-list";
  --keys: '["black", "grey", "white", "grey-gradient", "with-image"]';
  --selector: '[".bg-black", ".bg-grey", ".bg-white", ".bg-grey-gradient", ".bg-with-image"]';
  --background: '["#000000", "#404040", "#ffffff", "linear-gradient(#ffffff, #ffffff 85%, #404040)", "url(\u0022foo/bar.png\u0022)"]';
  --font_color: '["#ffffff", "#ffffff", "#000000", "#000000", "#000000"]';
}

.styleguide-reference-borders {
  --structure: "nested";
  --keys: "thin normal bold";
  --size: "rem-calc(1px) rem-calc(3px) rem-calc(5px)";
  --style: "solid solid solid";
  --color: "white white black";
}

.styleguide-reference-gradients {
  --structure: "object-complex";
  --object: '["linear-gradient(#f69d3c, #3f87a6)", "radial-gradient(#f69d3c, #3f87a6 50px)"]';
}

.styleguide-reference-grid_cell_sizes {
  --structure: "flat";
  --keys: "5 25 33 75 100";
  --values: "5 25 33.3333 75 100";
}

.styleguide-reference-grid_cell_total {
  --structure: "number";
  --value: 5;
}

.styleguide-reference-spaces {
  --structure: "list";
  --items: "tiny short normal large wide";
}

.styleguide-reference-version {
  --structure: "string";
  --value: "42.0";
}

Then load this manifest with script styleguide.py and it will return this JSON:

{
    "metas": {
        "compiler_support": "libsass",
        "references": [
            "palette",
            "schemes",
            "borders",
            "gradients",
            "grid_cell_sizes",
            "grid_cell_total",
            "spaces",
            "version"
        ],
        "created": "2012-10-15T10:00:00"
    },
    "gradients": [
        "linear-gradient(#f69d3c, #3f87a6)",
        "radial-gradient(#f69d3c, #3f87a6 50px)"
    ],
    "borders": {
        "thin": {
            "size": "rem-calc(1px)",
            "style": "solid",
            "color": "white"
        },
        "normal": {
            "size": "rem-calc(3px)",
            "style": "solid",
            "color": "white"
        },
        "bold": {
            "size": "rem-calc(5px)",
            "style": "solid",
            "color": "black"
        }
    },
    "grid_cell_sizes": {
        "5": "5",
        "25": "25",
        "33": "33.3333",
        "75": "75",
        "100": "100"
    },
    "grid_cell_total": 5,
    "version": "42.0",
    "palette": {
        "black": "#000000",
        "white": "#ffffff",
        "grey": "#404040"
    },
    "schemes": {
        "black": {
            "selector": ".bg-black",
            "background": "#000000",
            "font_color": "#ffffff"
        },
        "grey": {
            "selector": ".bg-grey",
            "background": "#404040",
            "font_color": "#ffffff"
        },
        "white": {
            "selector": ".bg-white",
            "background": "#ffffff",
            "font_color": "#000000"
        },
        "grey-gradient": {
            "selector": ".bg-grey-gradient",
            "background": "linear-gradient(#ffffff, #ffffff 85%, #404040)",
            "font_color": "#000000"
        },
        "with-image": {
            "selector": ".bg-with-image",
            "background": "url(u0022foo/bar.pngu0022)",
            "font_color": "#000000"
        }
    },
    "spaces": [
        "tiny",
        "short",
        "normal",
        "large",
        "wide"
    ]
}