@yokgs/dyescript-light v0.2.0
DyeScript-Light
Command Line Interface of lightweight (& pre-published) version of @yokgs/DyeScript with integrated css utilities
Powered by @yokgs/bluedyejs
Installation
npm install -g @yokgs/dyescript-light
Usage
To compile myfile.dye
and save the resulting css to /dist/css
folder use the following command
dyec -p myfile -o ./dist/css
Syntax
Import (@@
operator)
include a utility file Margin.dye
@@ <Margin>
or
import <Margin>
include a dye file my-buttons.dye
@@ ./my-buttons
or
import ./my-buttons
Style definitions
Set background red and color black for a button with class 'styled'
Similar to CSS styles
$ button.styled backgroundColor red color black
or
style button.styled backgroundColor red color black
DyeScript classes
Define the class bordered with the following properties
- border width 4px
- border color gold
- border style solid
.$ bordered borderWidth 4px borderColor gold borderStyle solid
or
class bordered borderWidth 4px borderColor gold borderStyle solid
Apply the class bordered to a button, img and .card
$bordered button img .card
You can also apply the class to another class
$bordered $anotherClass
The class anotherClass
will inherit all the properties of bordered
Note : DyeScript classes do not appear in the final output
Utility-First Classes
DyeScript provide a bunch of utility classes to speed up the creation of custom styles
Let's recreate the class bordered from the previous example using Utility classes
@@ <Borders>
$Border|3 $bordered
$Border|solid $bordered
.$ bordered borderColor gold
License
Copyright (c) 2023-present, Yazid Slila (yokgs)