2

この問題を示すためにjsFiddleを作成しました。これは単なる例です。

私がしていること

柔軟なグリッドを作成しているとしましょう。私のHTMLは次のようになります。

<div>
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
</div>

4列。2つのミックスインと$gutterというグローバル変数があります。ミックスインでは、この変数を呼び出してガターを追加し、幅を変更します。

$gutter: 1%;

@mixin col($width){
    float: left;
    width: $width - ($gutter * 2);
    margin: 0 $gutter;
}
@mixin row(){
    width: 100%;
    overflow: hidden;
}

私はそれを次のように使用します：

div { @include row(); }
p { @include col(25%); }

私がやりたいこと

次に、ページに2番目の異なるグリッドを追加するとします。このHTMLを作成し、各グリッドとIDを指定して区別します。

<div id="one">
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
</div>

<div id="two">
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
</div>​

2番目のグリッドのガター幅を変えたい。または、代わりに、側溝はありません。

#one { @include row(); }
#two { @include row($gutter: 0); }

これは明らかに機能しません。列の数は可変である可能性があるため、この$ gutter：0宣言を@include col（）の各インスタンスに追加することはできません。これはDRYの原則に違反し、最終的に（複雑なレイアウトでは）保守できなくなります。

質問

あるミックスインで設定された変数を（子要素で）別のミックスインにフィルターするようにするにはどうすればよいですか？私はこれを簡単に行うことができることを知っています：

@mixin row(){
    width: 100%;
    overflow: hidden;
    .col { etc etc etc }
}

ただし、クラス名は必ずしも.colであるとは限りません。これは意味がありますか？col（）ミックスインに、row（）ミックスインに渡す変数を継承させたい。どのように？

4

1 に答える 1

1

Sófka から jsfiddle をフォークし、それを CSS 子セレクター (">") で拡張して、行内の任意のタグをターゲットにしました。

// Inside the row mixin
& > * {
    @include col($columnWidth, $gutter);
}

さらに、ミックスインに列幅属性を追加し、デフォルトのガターを設定しました。

$defaultGutter: 1% !default; // Make sure the variable is set
@mixin col($width, $gutter: $defaultGutter){
    ...
}

参照: http://jsfiddle.net/N44LW/12/

PS .:あなたの質問を完全に理解したかどうかはわかりませんが、これが役に立てば幸いです。

于 2012-11-15T09:03:43.153 に答える