Skip to content

Latest commit

 

History

History
119 lines (77 loc) · 3.15 KB

FEATURES.md

File metadata and controls

119 lines (77 loc) · 3.15 KB

WCSS Features

For the full API, please see the WCSS docs site.

Scoping

Be sure to see the prefixing and scoping API in the documentation site.

When supporting legacy UIs there may be issues with importing a Sass file and its selectors. To enable scoping simply set the $scope variable to be true before importing any selectors that support this setting.

$scope: true;
@import "~@aurodesignsystem/webcorestylesheets/dist/ ... "

This setting will result in the following CSS selectors

html.auro { ... }

.auro body,
.auro .baseType { ... }

Prefixing

To enable prefixing simply set the $prefix variable to be true before importing any selectors that support this setting.

$prefix: true;
@import "~@aurodesignsystem/webcorestylesheets/dist/ ... "

This setting will result in the following CSS selectors

html { ... }

body,
.auro_baseType { ... }

Scoping and prefixing

If needed, both $scope and prefix can work in tandem. To enable, simply set both the scope and prefix variables as true before importing any selectors that support these settings.

$scope: true;
$prefix: true;
@import "~@aurodesignsystem/webcorestylesheets/dist/ ... "

This setting will result in the following CSS selectors

html.auro { ... }

.auro body,
.auro .auro_baseType { ... }

Importing utility classes and using the !important flag

When importing utility selectors developers have the option to invoke the !important CSS flag. Within WCSS the global $important variable is null by default. To change, simply change the value of the variable before importing any utility partials.

$important: true;

The output of default selector

.util_is-lgOnly {
  display: none;
}

The output with $important: true

.util_is-lgOnly {
  display: none !important;
}

See !important spec

layoutPropertiesGenerator

Importing this file will auto-generates all available utility selectors. Output can be configured by redefining default values before import. See the default value examples below.

none, xs, md, lg, xl

See API

insetUtility selector generator

Importing this file will return a series of pre-defined inset (the padding around an element where all sides are equal) selectors based on the inset spacing design spec.

none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl

See API

spacingUtility selector generator

Importing this file will return a series of pre-defined selectors based on the stack or inline spacing design specs

[inline, stack] inline - L/R, stack - top/bottom

none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl

See API