@css / css()
Styling utility to write nested style rules.
To style your website in Jaspr you need to write css styles alongside your html markup. See the Styling docs for a general overview of the different ways to add styling to your website.
The css utility gives you a convenient way of writing CSS style rules in Dart alongside your Jaspr components. It uses a combination of nested css selectors and Jasprs fully typed CSS bindings in Dart.
Registering style rules
When used as the @css annotation, you can register any amount of style definitions to be automatically rendered as CSS in your page.
@css
List<StyleRule> get styles => [
// Style rules in here (covered in next section)
/* ... */
];
The @css annotation can be applied to the following elements:
- global variables or static fields of type
List<StyleRule> - global or static getters returning
List<StyleRule>
The recommended approach is to define your styles inside your components for better locality of your code:
class App extends StatelessComponent {
const App({super.key});
@override
Component build(BuildContext context) {
return div(classes: 'main', [
p([.text('Hello World')]),
]);
}
@css
static List<StyleRule> get styles => [
css('.main', [
css('&').styles(
width: 100.px,
padding: Padding.all(10.rem),
),
css('p').styles(
color: Colors.blue,
),
]),
];
}
Styles defined in a component and registered using @css are not scoped to that component.
You should try to use ids or unique class names as selectors to prevent unwanted effects on other components or conflicting style definitions.
Tip: The jaspr_lints package provides a convenient lint rule to keep your styles properties organized. Learn more about it here.
How the styles are rendered depends on your Rendering Mode:
By default, your styles are rendered during the normal pre-rendering phase and embedded as an inline <style> element in your html output.
You can change this behavior by using the jaspr.styles = standalone option in your pubspec.yaml file:
jaspr:
styles: standalone
This will render all your styles to a separate CSS file and include a <link> to it in your html output during pre-rendering.
Files using @css will always be part of the server scope and therefore cannot depend on client-only libraries like package:web or dart:js_interop. Make sure to only use server-compatible libraries and packages (such as package:universal_web) in these files or your styles will not be rendered.
Defining style rules
The default css() method takes a selector and calls styles().
css('.main').styles(
width: 100.px,
minHeight: 100.vh,
color: Colors.black,
)
Which renders to:
.main {
width: 100px;
min-height: 100vh;
color: black;
}
Nested style rules
Alternatively, calls of css() can take an additional list of nested rules like this:
css('.main', [
css('&').styles(width: 100.px),
css('&:hover').styles(backgroundColor: Colors.blue),
css('p').styles(fontSize: 1.5em),
])
This renders to:
.main {
width: 100px;
}
.main:hover {
background-color: blue;
}
.main p {
font-size: 1.5em;
}
Nested style rules will be scoped to the parent. Using the & symbol as part of a child selector
refers to the parent selector.
Style rules can also be nested any level deep.
Special style rules
In addition to the default style rule, the css utility also supports other rule variants:
css.import()
The css.import() function takes an url and renders a @import css rule:
css.import('https://fonts.googleapis.com/css?family=Roboto')
Renders to:
@import url(https://fonts.googleapis.com/css?family=Roboto);