Question

目前在网站构建中使用SASS。这是我的第一个使用它的项目，尝试了一点之前并喜欢它。我用LESS，超级有用的东西制作了一些基本的mixins和变量！

我试图了解SASS mixins和语法，特别是当页面更改为其他语言时交换图像，是身体ID更改或<html lang="en">。并且，例如，如果网站改为中文，则交换浮动。所以一个mixin，其中float左边是浮动的，除非语言是AR，然后它变得浮动。

我认为它会是这样的：

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

它的语法我遇到了问题。

Answer 1

我可能会使用@content功能，并执行以下操作：

@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;
    }
}

编译为：

: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; }

如果背景图片根据语言命名，那么使用@each并执行以下操作可能有意义：

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

编译为：

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

SASS mixin用于交换图像/浮点数的网站语言（更改）

1 个答案: