Home/ Questions/Q 8760975
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T15:10:42+00:00

Currently using SASS on a website build. It is my first project using it,

  • 0

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();}

It’s the syntax I am having problems with.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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); }
    • 0