PCSS

PCSS is a syntactic sweetener for CSS and it's designed to improve workflow.

CSS syntax vs PCSS syntax

CSS like this

.container {
    width: 85%;
    padding: 10px 10px 10px 10px;
    text-align: center;
    color: red;
    text-decoration: underline;
}
.container h1,
.container p {
    font-family: Arial, sans-serif;
}
p {
    color: blue;
    font-size: 15px;
}

can be written like this

$container:[];
  .width:85%;
  .padding: 10px 10px 10px 10px;
  .text-align:center;
  .color:red;
  .text-decoration:underline;
			
$container:[h1, $container p];
  .font-family: Arial, sans-serif;
			
_p:[];
  .color:blue;
  .font-size:15px;

Table of Contents

• Features
• Install
• Usage
• PCSS Syntax

Features

• Fast setup
• Easy to learn
• PCSS translates into minified CSS

Install

Clone PCSS: https://github.com/harmankang/pcss.git

Usage

Include pcss.js in your HTML file:

<head>
  <script src="pcss.js"></script>
</head>

Call the PCSS parser:

<head>
  <script src="pcss.js"></script>
  <script type="text/javascript">
	parser.parse();
</script>
</head>

Pass your PCSS as an argument:

<head>
  <script src="pcss.js"></script>
  <script type="text/javascript">
  
    parser.parse(`
	
      $container:[];
	    .color: rgba(100, 100, 100, 1);
		
    `);
	
  </script>
</head>

The example above will create a style element and append it to the head element.

PCSS syntax

Selectors

Classes

$class:[];

IDs

#id:[];

Tags

_body:[];

Multiple Selectors

$class:[ $a, #b ];

Properties and Values

$container:[];
	.width:85%;
	.padding: 10px 10px 10px 10px;
	.text-align:center;
	.color:red;
	.text-decoration:underline;

LICENSE

MIT