0

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

我试图了解 SASS 混合和语法，特别是当页面更改为不同语言时交换图像，无论是正文 ID 更改还是<html lang="en">. 并且，例如，如果网站更改为中文，则交换浮动。所以一个向左浮动的mixin就是向左浮动，除非语言是AR然后它变成向右浮动。

有了 LESS，我认为它会是这样的：

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

这是我遇到问题的语法。

4

1 回答 1

2

我可能会使用该@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); }
于 2012-10-25T17:26:24.737 回答