naoyaの日記

■ CSS JSON 19:24

• http://www.featureblend.com/css-json.html

Perl で。

#!/usr/local/bin/perl
use strict;
use warnings;
use JSON::Syck;

my $data = {
    'div#main' => {
        'color'   => '#000',
        'padding' => '1em',
    }
};

my $json = JSON::Syck::Dump($data);
print json2css($json);

sub json2css {
    my $json = JSON::Syck::Load(shift);
    my $css = '';
    for my $selector (keys %$json) {
        $css .= sprintf "%s{\n", $selector;
        for my $property (keys %{$json->{$selector}}) {
            $css .= sprintf "\t%s: %s;\n", $property, $json->{$selector}->{$property};
        }
        $css .= "}\n";
    }
    $css;
}

$data のまま扱えばいいやんという話もあるけどとりあえず CSS JSON を試すため敢えて JSON に。

% perl json2css.pl
div#main {
     color: #000;
     padding: 1em;
}

となる。へえ。なんかできそう。

追記

例が悪いね。

#!/usr/local/bin/perl
use strict;
use warnings;
use JSON::Syck;

local $/;
print json2css(<>);

sub json2css {
    my $json = JSON::Syck::Load(shift);
    my $css = '';
    for my $selector (keys %$json) {
        $css .= sprintf "%s {\n", $selector;
        for my $property (keys %{$json->{$selector}}) {
            $css .= sprintf "\t%s: %s;\n", $property, $json->{$selector}->{$property};
        }
        $css .= "}\n";
    }
    $css;
}

として

% cat cssjson.txt
{
  "div#main": {
    "color":"#000",
    "padding":"1em"
  }
}

% perl json2css.pl < cssjson.txt
div#main {
     color: #000;
     padding: 1em;
}

とか。