SASS mixin for swapping images / floats on site language (change)

StackOverflow https://stackoverflow.com/questions/13073355

Question

Currently using SASS on a website build. It is my first project using it, tried a little LESS before and liked it. I made a few basic mixins and variables with LESS, super useful stuff!

I am trying to get my head around SASS mixins, and syntax, specifically for swapping images when the page changes to a different language, be that with body ID changing or <html lang="en">. And, swapping floats around if, for example, a website changed to Chinese. So a mixin where float left is float left unless language is AR and then it becomes float right.

With LESS I think it would be something like:

.headerBg() when (@lang = en)  {background-image:url(../img/hello.png);}
.headerBg() when (@lang = it)  {background-image:url(../img/ciao.png);}

.header {.headerBg(); width: 200px; height:100px}

.floatleft() when (@lang = en) { float: left;}
.floatleft() when (@lang = ar) { float: right;}

.logo {.floatleft();}

Its the syntax I am having problems with.

Was it helpful?

Solution

I'd probably use the @content feature and do something like this:

@mixin headerBg {
    .header {
        @content
    }
}

@mixin floatDir {
    .logo {
        @content
    }
}

:lang(en) {
    @include headerBg {
        background-image:url(../img/hello.png);
    }
    @include floatDir {
        float: left;
    }
}

:lang(ar) {
    @include headerBg {
        background-image:url(../img/ciao.png);
    }
    @include floatDir {
        float: right;
    }
}

Which compiles to:

:lang(en) .header {
  background-image: url(../img/hello.png); }
:lang(en) .logo {
  float: left; }

:lang(ar) .header {
  background-image: url(../img/ciao.png); }
:lang(ar) .logo {
  float: right; }

If the background image names where based on the language, then it might make sense to use @each and do something like this:

@each $lang in en, ar {
    :lang(#{$lang}) {
        @if $lang == en {
            .logo {
                float: left;
            }
        } @else if $lang == ar {
            .logo {
                float: right;
            }   
        }
        .header {
            background-image:url(../img/#{$lang}.png);
        }
    }
}

Which compiles to:

:lang(en) .logo {
  float: left; }
:lang(en) .header {
  background-image: url(../img/en.png); }

:lang(ar) .logo {
  float: right; }
:lang(ar) .header {
  background-image: url(../img/ar.png); }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top