https://github.com/connellr023/stylescript
A CSS superset designed to be directly integrated with a Node.js webserver.
https://github.com/connellr023/stylescript
css macro sscr superset
Last synced: 6 months ago
JSON representation
A CSS superset designed to be directly integrated with a Node.js webserver.
- Host: GitHub
- URL: https://github.com/connellr023/stylescript
- Owner: connellr023
- Created: 2020-02-15T00:31:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-23T00:37:30.000Z (almost 2 years ago)
- Last Synced: 2025-02-10T21:36:57.693Z (8 months ago)
- Topics: css, macro, sscr, superset
- Language: TypeScript
- Homepage:
- Size: 105 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Table of Contents
- [Info](#info)
- [Installation](#installation)
- [Dependancies](#dependancies)
- [Examples](#stylescript-code-examples)
- [Integration](#integration-with-ts-node)
# Info
StyleScript is a CSS superset designed to be directly integrated with a TypeScript Node.js webserver.
# Dependancies
```json
"dependencies": {
"@types/node": "^13.7.1",
"body-parser": "^1.19.0",
"fs": "0.0.1-security",
"nodemon": "^2.0.2",
"ts-node": "^8.6.2",
"ts-node-dev": "^1.0.0-pre.44",
"tsc": "^1.20150623.0",
"typescript": "^3.7.5"
}
```
# Installation
- Inside of your Node.js project, run **npm install @crisp32/stylescript**
- You are now ready to use StyleScript in your project
# StyleScript Code Examples
```scss
/* Include Multiple Files (Automatically Assumes *.sscr File Extension) */
%include(./styles1, ./styles2);
/* Variable Declaration */
%var(bgColour, #131313);
%var(txtColour, white);
/* Variable Re-Assignment */
%var(txtColour, lightgrey);
/* Style Script Block Definition */
%testBlock {
text-align: center;
color: %txtColour; /* Variable Insertion */
}
div {
%testBlock; /* Insert Code Block */
margin-bottom: 5px;
}
```
# Integration With TS-Node
```typescript
import { StyleScript as ss } from "stylescript"; // Can also use require("stylescript").StyleScript;
const express = require("express");
const parser = require("body-parser");
const app = express();
const port = 3000;
// Use Body Parser Middleware
app.use(parser.urlencoded({ extended:true }));
// StyleScript Auto Compile Middleware
app.use(async (req, res, next):void => {
// Set __dirname to the Root Directory of the Project
ss.autoCompile(req, res, next, __dirname, {
highlightColour: "blue" // Can be used in SSCR { background-color: %highlightColour; }
});
});
// Another way of Serving StyleScript
app.get("/someStyles", async (req, res):void => {
res.setHeader("content-type", "text/css");
res.send(ss.compile("./styles.sscr"), {
someVar: "red",
divWidth: "20px"
});
});
// Simple Page that will Reference the example.sscr Style Sheet
app.get("/", (req, res):void => res.send(`
Hello World!
`));
// Start Server
app.listen(port, ():void => console.log(`SSCR Example Listening on Port ${port}!`));
```