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

Apache 2.0

Copyright (c) 2023-present, Yazid Slila (yokgs)