1.0.0 • Published 6 years ago
pcss.js v1.0.0
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
1.0.0
6 years ago