0

&解決された親セレクター ( ) を SASS ( 3.2.3 を実行) で、おそらく mixin でキャプチャする方法を見つけようとしています。

残念ながら (そして github でこれに関する議論を見つけました)、次の解決策は機能しません:

@mixin append-to-captured-parent($append) {
    $selector: "&-#{$append}";
    #{$selector} { @content; }
}

.foo {
    @include append-to-captured-parent("bar") {
        color: blue;
    }
}

望ましい出力は次のとおりです。

.foo .foo-bar { color: blue; }

目的の出力が得られるハックや回避策はありますか? 私が理解しているように、SASSパーサーがノードツリー全体を構築するまで親セレクターが解決されないため、これはおそらく不可能です&-bar { ... }。

Syntax error: Invalid CSS after "&": expected "{", was "-bar"

SASS をだまして、これを先制的に解決することはできますか?

注:私は、これを実現できる SASS 拡張機能 ( Ruby libs ) に対してオープンです。残念ながら現時点では、私は Ruby に精通しておらず、自分で作成することはできません (ただし、作業中です) 。

4

1 に答える 1

1

さて、私は一種の回避策を思いつきました。

このアプローチは、意図した機能を単に分離し、実際の階層から独立して管理します。

まず、いくつかの簡単なユーティリティ:

@function slice($list, $from, $into) {
    $result: ();
    @for $index from $from through $into {
        $result: append($result, nth($list, $index));
    }
    @return $result;
}

@function implode($list, $separator) {
    $result: nth($list, 1);
    @for $index from 2 through length($list) {
        $result: #{$result}#{$separator}#{nth($list, $index)};
    }
    @return $result;
}

次に根性：

$-class: ();
@function get-class() {
    $top: if(length($-class) - 2 < 1, 1, length($-class) - 2);
    @return implode(slice($-class, $top, length($-class)), "-");
}

@mixin class($name) {
    $-class: append($-class, $name);
    .#{get-class()} {
        @content;
    }
    $-class: slice($-class, 1, length($-class) - 1);
}

ここで何が起こるかというと、「グローバル」変数$-classは、 mixin の呼び出しごとにネスト スタックを維持しますclass。スタックの上位 3 つの名前を内破することにより、CSS クラス宣言を作成します (必要に応じて、これを完全なスタックに変更できます) 。

したがって、質問の例を複製します。

@include class (foo) {
    color: red;
    @include class (bar) {
        color: blue;
    }
}

生産します:

.foo { color: red; }
.foo .foo-bar { color: blue; }

それほど些細な例は次のとおりです。

@include class(list) {
    test: "list";
    @include class(item) {
        test: "item";
        @include class(heading) {
            test: "heading";
        }
        @include class(content) {
            test: "content";
            @include class(graphic) {
                test: "graphic";
            }
            @include class(summary) {
                test: "summary";
            }
            @include class(details) {
                test: "details";
            }
        }
        @include class(footing) {
            test: "footing";
        }
    }
}

生産:

.list { test: "list"; }
.list .list-item { test: "item"; }
.list .list-item .list-item-heading { test: "heading"; }
.list .list-item .list-item-content { test: "content"; }
.list .list-item .list-item-content .item-content-graphic { test: "graphic"; }
.list .list-item .list-item-content .item-content-summary { test: "summary"; }
.list .list-item .list-item-content .item-content-details { test: "details"; }
.list .list-item .list-item-footing { test: "footing"; }
于 2013-03-23T17:05:46.330 に答える