Having trouble changing layout margins

Hello,

I'm having trouble changing margins in a VerticalLayout. I want to customise the margin size for a particular layout but leave the default margins intact for all other instances of VerticalLayout in my application.

I am using a theme based on valo on vaadin 7.5.7. Many of the forum posts on this topic relate to vaadin version 6.

I have a file called cloudfreedom.scss which contains:

@import "../valo/valo.scss";

@mixin cloudfreedom {
  @include valo;

  // Insert your own theme rules here
 
    .mainapp-margins{
        .v-layout-margin-left {padding-left:   100px;}
    }
}

In my java source I have:

                    scroll_layout.addStyleName("mainapp-margins");
                    scroll_layout.setMargin(true);

where scroll_layout is an instance of VerticalLayout. I was hoping that after compiling the theme (which I have done) the left hand margin would be 100 pixels.

I can make this work across the whole application using the line below at the top of my scss file but I only want the margin to work for one particular layout.

$v-layout-margin-left: 100px;

Can someone please help me with this. I have spent far too long already!

Thanks