DS Vaadin Flow Gradle Plugin May 29th, 2019

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-war' version 3.5.1
        ...
    }

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

Nextr 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/webapp/frontend/styles 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 @HTMLImport annotation.

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

MyProjectUI.java

1
2
3
@HtmlImport("frontend://styles/myproject-theme.html")
@Theme(Lumo.class)
public class MyProjectUI extends UI { }

On line 1 you can see that we are referencing our myproject-theme.scss file.

How does SASS become HTML

The way this works is that the DS Vaadin Flow Gradle Plugin will leverage the SASS Plugin to convert the SASS into CSS and then use the CSS auto-wrapping feature to wrap the remaining CSS into HTML.

By using the CSS auto-wrapping feature it means you will also be able to style the Shadow DOM with SASS.