DS Vaadin Flow Gradle Plugin Feb 1st, 2020

Using Syntactically Awesome Style Sheets (SASS)

For Vaadin 7 and 8 users using SASS was the default way of styling Vaadin applications. This is no longer the case with Vaadin Flow but nevertheless, it is still fully possible to use SASS to style the application.

A simple example

Before we start we need to first include the SASS Plugin into the project.

build.gradle

1
2
3
4
    plugins {
        id 'io.freefair.jsass-java' version 3.5.1
        ...
    }

Once that is done then the SASS Plugin will take care of converting our SASS into CSS at build time.

Next lets look at a trivial example.

myproject-theme.scss

1
2
3
4
5
6
7
8
9
$primary-color: green;
$secondary-color: red;

label { 
    color: $primary_color;
    &.clicked { 
        color: $secondary_color; 
    } 
}

In this case we are style an element of type label to have a text color of green and when the user clicks on the label and a new css-class is added to the label it becomes red. This is just a very simple example of how CSS can be used.

For more examples of how to use the SASS syntax, check out this great tutorial.

Where should I put my SCSS files?

SCSS files should be put in the src/main/stylesheets directory.

This directory is specially treated by the DS Vaadin Flow Gradle Plugin and allows you to use SCSS files to style also parts of the Shadow DOM leveraging the plugin’s auto-wrapping feature.

Injecting SCSS files into your Vaadin application

The way you tell Vaadin about a new SCSS file is to annotate a Vaadin class with the @CssImport annotation.

For example, when you create a new project your UI class will look like this:

MyProjectUI.java

1
2
3
4
@Route("")
@Theme(Lumo.class)
@CssImport("./myproject-theme.scss")
public class MyView extends VerticalLayout { }

On line 3 you can see that we are referencing our myproject-theme.scss file located in src/main/stylesheets directory.

When the application is compiled the @CssImport tag will be specially treated and the SASS styles will be converted to CSS and injected into the browser bundle just like a normal CSS file would.