Let’s start from the top, without Sass, and continue from there. We’ll use the new setPrimaryStyleName() to do some things previously not possible.

We’ll work on a small example with buttons that we want to customize:

Java

And our basic (mostly empty at this point) “sassy” theme, based on Reindeer, looks like this (assuming you’re using the recommended styles.scss+themename.scss structure as introduced in the previous tutorial):

SCSS

@mixin sassy {
  @include reindeer;
  // your styles go here
}

And the result is a basic Reindeer-looking button. We can change the color of the caption like this:

SCSS

.v-button-caption {
  color:  red;
}

Java

css:

SCSS

.important .v-button-caption {
  color: red;
}

Ok, this is all fine - but we realize our important button should actually not look at all like a Reindeer button.

Since Reindeer adds quite a few styles, this requires quite a lot of customization with this approach. Enter setPrimaryStyleName():

Java

b = new Button("More important");
b.setPrimaryStyleName("my-button");
addComponent(b);

Now everything that was previously .v-button in the browser DOM is all of a sudden .my-button, and we have a completely unstyled button, but with the DOM-structure and functionality of a regular button. We can easily style this without interference from theme styles:

However, in our case we realize we still want it to look like a button, just not with so much decorations as a Reindeer button. Let’s apply Base styles:

SCSS

@include base-button($primaryStyleName: my-button);
.my-button {
  color: red;
}

What? We now have a basic button with red text, but how?

We have @included base-button and renamed it’s selectors to “my-button” (instead of the default “v-button”). This makes the rules match our button perfectly (we used setPrimaryStyleName() to rename it) - in effect we apply base-button to our “my-button”.

Now we have a good starting-point. Note that this might not be such a big deal for small things, like buttons, but imagine something like Table witout any styles. Yikes.

Here are the full sources (using distinct colors for each button for clarity):

Java

package com.example.sassy;
import com.vaadin.annotations.Theme;
import com.vaadin.ui.Button;
import com.vaadin.ui.Layout;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
@Theme("sassy")
public class SassyUI extends UI {
  @Override
  public void init(VaadinRequest request) {
    Button b = new Button("Reindeer");
    Layout layout = new VerticalLayout();
    layout.addComponent(b);
    b = new Button("important");
    b.addStyleName("important");
    layout.addComponent(b);
    b = new Button("More important");
    b.setPrimaryStyleName("my-button");
    layout.addComponent(b);
  }
}

SCSS

// sassy/sassy.scss
@import "../reindeer/reindeer.scss";
@mixin sassy {
  @include reindeer;
  .v-button-caption {
    color: red;
  }
  .important .v-button-caption {
    color:  green;
  }
  @include base-button($name: my-button);
  .my-button {
    color: blue;
}