3

質問があります。したがって、ミキシングでは、親セレクター「&」を参照しています。これは、ミックスインがネストされていない限り機能します。ミキシングがネストされていないシナリオで使用されているかどうかを検出する方法、または「&」が null かどうかを確認する方法はありますか?

これは、ミックスイン呼び出しがネストされていない場合に機能します

=myresponsiveMixin($media)
  @if $media == small {
    @media only screen and (max-width: $break-small)
       @content
  @else if $media == medium
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1)
       @content

これは、mixin 呼び出しがネストされている場合はうまく機能しますが、ネストされていない場合は「&」を解決しません。

 =myresponsiveMixin($media)
      @if $media == small {
        @media only screen and (max-width: $break-small)
           .classInHTMLToAllowMediaQueries &
               @content
      @else if $media == medium
        @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1)
           .classInHTMLToAllowMediaQueries &
               @content

問題は、親セレクター「&」の値を確認できる方法がある場合、単一の mixin ですべてのベースをカバーできるかどうかです。

4

2 に答える 2

0

問題を解決するために間違った解決策を試みています。

この問題が強力な SASS フレームワークでどのように対処されているかをご覧ください。Eric MeyerのSusyを良い例として取り上げましょう。

次の HTML があるとします。

<div class="container">
  <div class="parent">
    <div class="child">
      Bla bla
    </div>
  </div>
</div>

mixin を初めて呼び出すときは、単純に実行します (コードはインデントされた .sass 構文にあります)。

$total-columns: 8 // Declaring a varible that will be used by the mixin

.parent
  +span-columns(4) // Span four of eight columns

しかし、子要素に対してそれを呼び出すと、親が既にプロポーションされているため、プロポーションは曲がってしまいます:

.child
  +span-columns(2) // This will fail. You want 2 of 8 columns,
                   // but due to nesting the math is crooked.
                   // It will be "2 of (4 of 8)".

この問題に対処するには、オプションの引数、つまり計算に使用されるコンテキストを指定します。

.child
  +span-columns(2, 4) // Now the mixin will take 2 parts of 4
                      // instead of 2 parts of four

この mixin のソース コードは、GitHubで入手できます。

つまり、次のようなオプションの引数を作成します (コードは CSS に似た .scss 構文です)。

@mixin span-columns(
  $columns,
  $context: $total-columns
  //...
) {
  //...
  width: columns($cols, $context /*...*/);
  //...
}

$contextデフォルト値がどのように設定されているかを参照してください。デフォルト値のおかげで、この引数は省略できます。つまり、$contextはオプションの引数です。

この mixin を呼び出すときに、$contextが提供されていない場合 (例: span-columns(2))、 に等しく設定され$total-columnsます。$total-columns初めて mixin を呼び出す前に、変数を設定する必要があります (上記の例を参照してください) 。

次に、2 つの引数を使用して幅を計算します。

更新日 2013 年 3 月 30 日

私は列に関して物事を理解しようとはしていません...私はそれを明確にするために私の質問を修正しています。

まず第一に、私の推奨事項はグリッド列だけではありません。それはあなたが採用できる普遍的な技術です。

次に、メディア クエリをネストしようとしていることがわかりました。

CSS3では、さまざまな種類のメディア クエリを組み合わせることができますprint。min-width: 601pxしかし、内部にを入れることはできませんmax-width: 600px。これは機能しません!

StackOverflow には、同じタイプのメディアクエリをネストしてはならない理由を説明する広範な回答があります: https://stackoverflow.com/a/11747166/901944

第三に、車輪を発明しようとしています。メディア クエリを処理するための素晴らしい mixin が既にあります: Respond To by Snugug。それは非常に使いやすく、非常に効果的です。

4 つ目は、XYのことです。曲がった mixin について尋ねる代わりに、それで解決しようとしている問題を説明してください! 実際の HTML を見せて、実現したい動作を説明してください。

SASS ハッキングを必要としないシンプルでエレガントなセマンティック ソリューションで解決できることを示します。

于 2013-03-28T17:06:42.530 に答える