ホームページ >ウェブフロントエンド >CSSチュートリアル >SASSを中心にしています

SASSを中心にしています

尊渡假赌尊渡假赌尊渡假赌オリジナル: 2025-02-24 10:58:11301ブラウズ

Centering With Sass

コアポイント

ルールを含めるか、パラメーターをより厳格なチェックを実行して幅と高さの有効な値であることを確認することにより、さらに改善できます。 @supports

CSSのセンターは常に退屈な仕事であり、言語の冗談でさえあり、「宇宙飛行士を月に送ったが、CSSで垂直に整列することはできません」などのジョークにつながりました。

CSSは、特に垂直センターリングに対処するとき、実際に少し注意が必要ですが、これらのジョークは少し不公平だと思います。実際、CSSにコンテンツを集中させる方法はたくさんあります。それを行う方法を知る必要があります。

この記事は、これらの方法がどのように機能するかを説明することではなく、使いやすいためにSASS Mixinでどのようにカプセル化されているかを説明することを目的としています。したがって、CSSセンターリングに少し不快感を覚えている場合は、事前にリソースを読むことをお勧めします。

CSSの中心

CSS中心：完全なガイド

概要

最初に、これは絶対センタリングの最も一般的なユースケース（モーダルボックス、パーツなど）であるため、その親要素の要素の中心に焦点を当てます。 CSSセンターリングについて誰かに尋ねるとき、あなたが得る通常の応答は次のとおりです。

その理由は、要素サイズがわからない場合、最良の解決策はCSS変換に依存することであるためです。これにより、ブラウザのサポートがわずかに削減されますが、非常に柔軟です。 CSS変換を使用できない場合、または要素の幅と高さを知っている場合、負のマージンに頼るのは簡単です。

したがって、私たちのミックスインは基本的に次のことを行います。要素の左上隅をコンテナの中央に絶対に配置し、サイズがミキシンに渡されるかどうかに応じて、CSS変換または負のマージンで後方に移動します。または、サイズが混合物の半分に渡されるかどうかに応じて、CSS変換または負のマージンを使用して幅を後方に移動します。サイズなし：変換を使用します。

次に、次のように使用できます

編集後、次の出力を出力する必要があります

わかりました、これは少し冗長に見えますが、この出力はデモンストレーションのみを目的としていることを忘れないでください。特定のケースでは、これらすべての方法を同時に使用していることに気付く可能性は低いです。

<code>/**
 * 为子元素启用位置上下文
 */
.parent {
  position: relative;
}

/**
 * 将元素在其父元素中绝对居中
 * 没有将尺寸传递给mixin，因此它依赖于CSS转换
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴使用负边距，对垂直轴使用CSS转换
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将高度传递给mixin，因此我们对垂直轴使用负边距，对水平轴使用CSS转换
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴和垂直轴都使用负边距
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}</code>

ビルドミックス

<code>.parent {
  position: relative;
}

.child-with-unknown-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.child-with-known-width {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  transform: translateY(-50%);
}

.child-with-known-height {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -200px;
  height: 400px;
}

.child-with-known-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  margin-top: -200px;
  height: 400px;
}</code>

わかりました、もっと深く掘り下げましょう。以前のコードスニペットから、Mixinの署名が既にわかっています。2つのオプションのパラメーター、$widthと$heightがあります。

<code>/**
 * 为子元素启用位置上下文
 */
.parent {
  position: relative;
}

/**
 * 将元素在其父元素中绝对居中
 * 没有将尺寸传递给mixin，因此它依赖于CSS转换
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴使用负边距，对垂直轴使用CSS转换
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将高度传递给mixin，因此我们对垂直轴使用负边距，对水平轴使用CSS转换
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴和垂直轴都使用负边距
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}</code>

続行します。いずれにせよ、Mixinは要素の絶対的な位置を必要とするため、この時点から開始できます。

<code>.parent {
  position: relative;
}

.child-with-unknown-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.child-with-known-width {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  transform: translateY(-50%);
}

.child-with-known-height {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -200px;
  height: 400px;
}

.child-with-known-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  margin-top: -200px;
  height: 400px;
}</code>

コードを巧妙に記述する必要があります。ここで一時停止して、私たちが持っているさまざまなオプションを分析しましょう：

宽度	高度	解决方案
未定义	未定义	translate
定义	定义	margin
定义	未定义	margin-left translateY
未定义	定义	translateX margin-top

これを使用しましょう。

<code>/**
 * 为子元素启用位置上下文
 */
.parent {
  position: relative;
}

/**
 * 将元素在其父元素中绝对居中
 * 没有将尺寸传递给mixin，因此它依赖于CSS转换
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴使用负边距，对垂直轴使用CSS转换
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将高度传递给mixin，因此我们对垂直轴使用负边距，对水平轴使用CSS转换
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴和垂直轴都使用负边距
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}</code>

Mixinのフレームワークを設定したので、実際のCSS宣言でギャップを埋めるだけです。

<code>.parent {
  position: relative;
}

.child-with-unknown-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.child-with-known-width {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  transform: translateY(-50%);
}

.child-with-known-height {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -200px;
  height: 400px;
}

.child-with-known-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  margin-top: -200px;
  height: 400px;
}</code>

メモ：#{0 0}スキルは、SASSがわずかに過度に攻撃的な圧縮を実行するのを防ぐために使用されるそれほどきれいではない技術であり、margin: mt 0 ml margin: mt 0 0 mlではなくを引き起こす可能性があります。

これまでのところ、すべてがうまくいきました。

さらに一歩進んでください

ミックスインをさらに改善するために、CSS変換サポートを確認するなど、ミックスインをさらに改善するためにいくつかのことを行うことができます。サポートされているかどうか。また、パラメーターをより厳格なチェックを実行して、幅と高さの有効な値であることを確認することもできます。

@supportsしかし、そうすることが良いことであるかどうかを自問する必要があります。 Mixin自体のループの複雑さは6に達しました。これは、SASSヘルパー機能にとって非常に多くのことです。まだ許容されますが、コードを追加すると、ループの複雑さがさらに向上する可能性があります。

FlexBoxはどうですか？

あなたの何人かが座席にジャンプしていると確信しており、FlexBoxを使用してその親要素の要素を中央に配置する方法を考えています。確かに、これは可能であり、条件が許せば、これがすべてのソリューションの中で最も簡単であることがわかります。

設定したソリューションとフレックスボックスソリューションの主な違いは、後者が親要素の上に構築され、前者は子要素に焦点を当てていることです（祖先のいずれかが静的とは異なる位置にある場合）。

要素が子要素を中心にするためには、3つのプロパティを設定する必要があります。このために好きな要素をミックス、プレースホルダー、クラス、または任意の要素を作成できます。

関連するベンダープレフィックスを追加したと仮定すると（MixinまたはAutoprefixerを介して）、このソリューションは多くのブラウザーで「適切に機能する」必要があります。

<code>/// 在其父元素中水平、垂直或绝对居中元素
/// 如果指定，此mixin将根据元素的尺寸使用负边距。否则，它将依赖于CSS转换，CSS转换的浏览器支持度较低，但由于它们与尺寸无关，因此更灵活。
///
/// @author Kitty Giraudel
///
/// @param {Length | null} $width [null] - 元素宽度
/// @param {Length | null} $height [null] - 元素高度
///
@mixin center($width: null, $height: null) { .. }</code>

あなたが推測したに違いないように、それは次のように生成します：

<code>@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;

  // 更多魔法在这里...
}</code>

最終的な考え

<code>@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;

  @if not $width and not $height {
    // 使用 `translate`
  } @else if $width and $height {
    // 使用 `margin`
  } @else if not $height {
    // 使用 `margin-left` 和 `translateY`
  } @else {
    // 使用 `margin-top` 和 `translateX`
  }
}</code>

短いミックスがその親の要素を簡単に中央に配置することを望んでいます。要素が特定のサイズを持っているかどうかに関係なく機能するほど賢いだけでなく、フレンドリーで直感的なAPIも提供します。これは非常に重要です。コードを見ることにより、誰でもすぐに、

行に、その親要素の要素を中心にロジックを実行するヘルパー関数が含まれていることをすぐに理解できます。ただし、この方法が機能するためには、後者（またはDOMツリーの親要素）は静的とは異なる位置を持たなければならないことを忘れないでください。 ;）

このコードは、sassmeister：

https://www.php.cn/link/780bc6caf343bb06a4372c0821012624

で使用できます。 @include center

（スペースの制限のため、FAQの部分はここで省略されています。FAQSパーツのコンテンツは記事の内容から非常に複製されており、必要に応じて自分で追加または変更できます。 >

以上がSASSを中心にしていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css sass Static 封装 include 循环 dom margin http Translate

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSを使用したアクセス可能な脚注次の記事：CSSを使用したアクセス可能な脚注

続きを見る