css top-level constant

CssUtility const css

Styling utility to create nested style definitions.

1. Annotation

Use as @css annotation to create a global styles definition:

@css
final styles = [
  css('.someclass').styles(width: 100.px)
];

Only allowed on global variables, global getters, static fields and static getters. Must be of type List<StyleRule>.

2. Styling

Use as css() method to define style rules:

• Provide any valid css selector and chain a set of styles:

  css('.someclass').styles(
    width: 100.px,
    color: Colors.black,
  )
  

• Provide a second parameter to define nested rules. Use '&' to refer to the parent selector.

  css('.someclass', [
    css('&').styles(width: 100.px),
    css('&:hover').styles(backgroundColor: Colors.blue),
  ])
  

• Use special rule variants:

  css.import('/some/external/styles.css');
  css.fontFace(fontFamily: 'SomeFont', url: '/some/font.ttf');
  css.media(MediaQuery.screen(minWidth: 800.px), [
    css('.someclass').styles(width: 200.px),
  ]);
  

Implementation

const css = CssUtility._();