# pcss.js

> Syntactic sweetener for CSS

Latest version **1.0.0** (published 2017-12-03) · 0 weekly downloads

## Install

```sh
npm install pcss.js
pnpm add pcss.js
yarn add pcss.js
bun add pcss.js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-12-03 |
| First published | 2017-12-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Harman Kang |
| Maintainers | hsk |

## Links

- npm: https://www.npmjs.com/package/pcss.js
- npm.io page: https://npm.io/package/pcss.js

## Recent versions

- 1.0.0 (latest) — 2017-12-03

## README

<h1>PCSS</h1>

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

## CSS syntax vs PCSS syntax

CSS like this

````css
.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

````css
$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

- <a href="#features">Features</a>
- <a href="#install">Install</a>
- <a href="#usage">Usage</a>
- <a href="#pcss-syntax">PCSS Syntax</a>

## 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:

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

#### Call the PCSS parser:

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

#### Pass your PCSS as an argument:

```html
<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

---
_Source: https://npm.io/package/pcss.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._