3

次のような Less mixin があります: http://codepen.io/sirlancelot/pen/QjzzEb?editors=110

// The mixin to toggle containers
#toggle-container(
    @collapsed-selector: ~"&.__collapsible .section--body",
    @expanded-selector: ~"&.__open .section--body"
) {
    @{collapsed-selector}:extend(#section--collapsed) {}
    @{expanded-selector}:extend(#section--expanded) {}
}

パラメーター内を親セレクターに展開できるように表記を変更することが可能かどうか疑問に思ってい&ます。それは、変数の外に書き込む場合です。

Codepen の CSS セクションで [View Compiled] をクリックすると、次の&ように直接出力されていることがわかります。

#section--collapsed,
.section &.__collapsible .section--body {
    transition: transform ease 250ms;
    transform: scaleY(0);
    transform-origin: top;
    position: absolute;
    width: 100%;
    z-index: 1;
}
#section--expanded,
.section &.__open .section--body {
    transform: scaleY(1);
    position: static;
}

を削除したい(space)&(スペースとアンパサンド)。

4

1 に答える 1

4

必要な結果を得ることができますが&、パラメトリック mixin 引数内に を含めることはできません。代わりに、少し移動する必要があります。

#toggle-container(
    @collapsed-selector: ~".__collapsible .section--body",
    @expanded-selector: ~".__open .section--body"
) {
    &@{collapsed-selector}:extend(#section--collapsed) {}
    &@{expanded-selector}:extend(#section--expanded) {}
}

私は何をしましたか？

  1. &パラメトリック mixin 引数領域の外に移動しました。なんで？文字列、変数、または値をエスケープすると、「補間を除いて変更なしでそのまま使用される」ためです。これは、アンパサンドが「そのまま」残され、必要に応じて親を参照できないことを意味します。したがって...
  2. アンパサンドを mixin 引数から ID の CSS に移動したので、LESS は子の親への参照を作成できます (そして、必要な方法でコンパイルできます)。
于 2015-11-16T14:28:16.593 に答える