Configuration ​

Without any configuration, all Lasco classes will be generated. To customize your theme, you can use many options describe below.

Options ​

Prefix ​

The $prefix allow to generate all classes with custom prefix. For example, you could set the $prefix option to ls like that:

@use "lasco" with (
    $prefix: "ls"
);

Now every class will be generated with the configured prefix:

.ls-block {
    display: block;
}

.ls-flex {
    display: flex;
}

.ls-grid {
    display: grid;
}

Important ​

The $important allow to generate all classes with !important rule. For example, you could set the $important option to true like that:

@use "lasco" with (
    $important: true
);

Now every class will be generated with the !important rule:

.block {
    display: block !important;
}

.flex {
    display: flex !important;
}

.grid {
    display: grid !important;
}

Separator ​

The $separator allow to customize the character used on to separate classes modifiers (media queries). For example, you could set the $separator option to @ like that:

@use "lasco" with (
    $separator: "@"
);

Engine Configuration ​

The $engine section is where you configure Lasco global behavior, like media queries breakpoints or list authority.

Configuring media queries ​

The screens key allow to set token rules for media queries.

@use "lasco" with (
    $engine: (
        "screens": (
           "lg": "1024px"        
        )
    )
);

Media queries ​

Configuring list authority ​

The list key allow to manage the list authority, black (default) or white.

@use "lasco" with (
    $engine: (
        "list": "white"
    )
);

White list ​

If you want only the display and position: absolute declarations, you can set "list": "white" option and configure the wanted properties.

@use "lasco" with (
    $engine: (
        "list": "white"
    ),
    $extend: (
        "display": true,
        "position": (
            absolute
        )
    )
);

Extend Configuration ​

Configuring properties ​

Each property have their own key for extend each default configuration.

@use "lasco" with (
    $extend: (
        "display": (
            flex
        )
    )
);