解説

SassとJSONを扱える言語の間で、データを共有する方法を示す。
特にPHP / Node.js / JavaScriptで有効となる。
更新日:2016年11月30日

手順

JSONファイルの準備

ここでは、サンプルとして下記の情報を保持するものを用意した。


{
	"themes":
	{
		"chrome":
		{
			"user-agent": "chrome",
			"font-color": "red",
			"background-color": "blue"
		},
		"firefox":
		{
			"user-agent": "firefox",
			"font-color": "blue",
			"background-color": "white"
		}
	}
}

Compassプロジェクトの作成

ここでは「sample」というプロジェクトを作成した。


bundle exec compass create sample

Compass Extentionとして提供されている「SassyJSON」をダウンロードし、「stylesheets」の直下に配置する。
結果、下記のような構造になった。


├── [Gemfile]
├── Gemfile.lock
└── [sample]
    ├── config.rb
    ├── [sass]
    │   ├── ie.scss
    │   ├── print.scss
    │   ├── screen.scss
    │   ├── style.scss
    │   └── variables.json
    └── [stylesheets]
        ├── [SassyJSON]
        ├── ie.css
        ├── print.css
        ├── screen.css
        └── style.css

Compassプロジェクトをコンパイル



bundle exec compass compile sample

結果、SASSは下記のようになる。
./sass/style.scss


@import 'SassyJSON';
// パラメーターに指定した変数名にjson値が格納されている
@import 'variables.json?themes';

@each $key, $theme  in $themes
{
	@each $browser, $config in $theme
	{
		body.#{$browser}
		{
			content: "#{$browser}";
			color: map-get($config, font-color);
			background-color: map-get($config, background-color);
		}
	}
}

Sassのコンパイル結果



/* line 6, ../sass/style.scss */
body.chrome
{
	content: "chrome";
	color: red;
	background-color: blue;
}

/* line 6, ../sass/style.scss */
body.firefox
{
	content: "firefox";
	color: blue;
	background-color: white;
}

サンプル・コード

jQueryでvariables.jsonを読み出し、画面に表示させるサンプル



$.getJSON
(
	"/sass/variables.json",
	function( data )
	{
		var len = data.length;

		for( var i=0; i < len; i++ )
		{
			$( "#demo" ).append( $( "li" ).attr( { "id":data[i].id } ).text( data[i].name ) );
		}
	}
);

PHPでJSONファイルを読み込み、パースするサンプル

sample.php


$json = file_get_contents( __DIR__ . '/sass/variables.json' );
if( $json === false )
{
	throw new \RuntimeException( 'file not found.' );
}
$data = json_decode( $json, true );

必須要素

重要

注意事項

なし。

更新履歴

2016/11/11 … 浅野 利博
新規作成

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.