0

現在、Web サイトのビルドで SASS を使用しています。それを使用するのは私の最初のプロジェクトで、少し前に LESS を試して気に入りました。LESS を使用していくつかの基本的な mixin と変数を作成しました。非常に便利なものです。

SASS ミックスインと構文、特にページが別の言語に変更されたときに画像を交換するための構文について頭を悩ませようとしています<html lang="en">。また、たとえば Web サイトが中国語に変更された場合などに、スワッピングが発生します。したがって、言語が AR でない限り、フロート左がフロート左である mixin は、フロート右になります。

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 に答える