Skip to content

FarhadG/CSSJSON

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CSS-JSON Converter for JavaScript, v.1.0
By Aram Kocharyan, http:https://ak.net84.net/

Converts CSS to JSON and back.

USAGE:

	// To JSON, ignoring order of comments etc
	var json = CSSJSON.toJSON(cssString);
	
	// To JSON, keeping order of comments etc
	var json = CSSJSON.toJSON(cssString, true);
	
	// To CSS
	var css = CSSJSON.toCSS(jsonObject);

SAMPLE (see example.html):

	JSON
	{"0":"/* This is another comment */","@media (max-width: 800px)":{"0":"/* This is a comment */","#main #comments":{"margin":"0px","width":"auto","background":"red"},"#main #buttons":{"padding":"5px 10px","color":"blue"}},"#main #content":{"margin":"0 7.6%","width":"auto"},"#nav-below":{"border-bottom":"1px solid #ddd","margin-bottom":"1.625em"}}
	
	JSON - KEEPING ORDER OF COMMENTS
	{"0":{"name":"@media (max-width: 800px)","value":{"0":"/* This is a comment */","1":{"name":"#main #comments","value":{"0":{"name":"margin","value":"0px","type":"attr"},"1":{"name":"width","value":"auto","type":"attr"},"2":{"name":"background","value":"red","type":"attr"}},"type":"rule"},"2":{"name":"#main #buttons","value":{"0":{"name":"padding","value":"5px 10px","type":"attr"},"1":{"name":"color","value":"blue","type":"attr"}},"type":"rule"}},"type":"rule"},"1":"/* This is another comment */","2":{"name":"#main #content","value":{"0":{"name":"margin","value":"0 7.6%","type":"attr"},"1":{"name":"width","value":"auto","type":"attr"}},"type":"rule"},"3":{"name":"#nav-below","value":{"0":{"name":"border-bottom","value":"1px solid #ddd","type":"attr"},"1":{"name":"margin-bottom","value":"1.625em","type":"attr"}},"type":"rule"}}
	
	CSS
	@media (max-width: 800px) {
		/* This is a comment */
		#main #comments {
			margin: 0px;
			width: auto;
			background: red;
		}
	
		#main #buttons {
			padding: 5px 10px;
			color: blue;
		}
	
	}
	
	/* This is another comment */
	#main #content {
		margin: 0 7.6%;
		width: auto;
	}
	
	#nav-below {
		border-bottom: 1px solid #ddd;
		margin-bottom: 1.625em;
	}