Reference images via mixins in different projects

Flow
1

I’m facing a problem by compiling my themes. I’ll start explaining my project structure.

I have a “common” theme which is the base of all my specific themes.
Then I have a specific theme used in a Vaadin project (including the common-mixin).

Now I created a mixin within the common theme to ease the styling of buttons:

@mixin default-button($image, $hoverimage) {
       background-image: $image;
       &:active, &:hover {
         background-image: $hoverimage;
       }
       &.v-disabled, &.v-disabled:active, &.v-disabled:hover {
         background-image: $image;
       }
     }
}

This styling is used in the common theme for some buttons.

.my-button{
   @include default-button(url(../buttons/mybutton.png), url(../buttons/mybutton_hover.png));
}

If I then use the button styling in my Vaadin project, the images are wrong referenced, because the current location where it starts to lookup the location of the specific project instead of the common one. I dont have the problem if I don’t use the mixin to define the button style.

Also this works if I use the mixin like this, but then my IDE shows errors in referencing the images and I loose the benefit of easy renaming, usage of images, etc:

@include default-button(url(../common/buttons/mybutton.png), url(../common/buttons/mybutton_hover.png));

I hope I described my problem properly, I guess this has sth to do with the sass compiler sequence. Any idea how I still can use the mixin to reference urls?

2

Hey Marita,

Perhaps I misunderstood your structure; but I created an additional folder in VAADIN/themes, called common. In that folder, I added a mixin, and an image. From the main theme, called test, I was able to use/include the mixin and reference the image without any errors.


theme folder structure

VAADIN/themes
> common (folder)
  common.scss
  test.png
> test (folder)
  test.scss


test.scss

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

@mixin test {
    @include valo;

    .v-label {
        @include bg(url(../common/test.png));
    }
}

Regarding the ease of renaming, you could set/store the image URLs as variables in your common theme. As an example:


common.scss

$img1: mybutton.png;


test.scss

.v-label {
  @include bg(url("../common/" + $img1));
}

You could also, of course, set “…/common/” (or whatever path you need) as a variable.

3

Hi Joacim,

thanks for the reply, having variables in the common.scss is our current workaround. I created a ticket for this and the vaadin guys found out some interesting stuff regarding the sass compilers (not only the vaadin sass compiler) and the url-resolution, if your interested see http://dev.vaadin.com/ticket/15115#comment:6

  • marita