SASS mixin for swapping images / floats on site language (change)
- by DBUK
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 combined with a brain melting day.
