LazyCss Guide

# UseStyle

# Base

useStyle is most basic feature in Lazycss.

let style = useStyle(cssList: cssList, namespace: string, preStyle: preStyle);
Name type introduction
cssList cssList cssList Map
namespace string namespace name
preStyle preStyle preset style list

This feature implement in version-0.1.1

Example:

html:

...
<body>
    <div class="demo"></div>
</body>
...

javascript:

//on node
import { useStyle } from "lazycss-base"
let style = useStyle({
    demo: {
        width: 30
    }
})
//This code sets the width of the class named Demo to 30

# cssList

cssList contains all css list.

# namespace

namespace will sets a name to every css named prefix in this namespace.

Example:

...
<body>
    <div class="demo">
        <!-- this dom width will set 30 -->
    </div>
    <div class="namespace-demo">
        <!-- this dom width will set 60 -->
    </div>
</body>
...

let style_without_namespace = useStyle({
    demo: {
        width: 30
    }
})

let style_with_namespace = useStyle({
    demo: {
        width: 60
    }
}, 'namespace')

# Preset Style

will implement in future.

# Reactive

Reactive input is implemented by modifying the style variable.

style.[namespace].demo.width = 44;
//namespace is a optional options

← useClass →