Kernpunkte
@supports
Während CSS in der Tat etwas schwierig ist, wenn es um Zentrieren geht, insbesondere im vertikalen Zentrieren, denke ich, dass diese Witze etwas unfair sind. Tatsächlich gibt es viele Möglichkeiten, Inhalte in CSS zu zentrieren. Sie müssen nur wissen, wie es geht.
Dieser Artikel soll nicht erklären, wie diese Methoden funktionieren, sondern zu veranschaulichen, wie sie in SASS -Mixin für die Benutzerfreundlichkeit eingekapselt werden. Wenn Sie sich also mit CSS -Zentrierung ein wenig unwohl fühlen, schlage ich vor, dass Sie einige Ressourcen im Voraus lesen:
Übersicht
Erstens werden wir uns darauf konzentrieren, das Element in seinem übergeordneten Element zu zentrieren, da dies der häufigste Anwendungsfall für die absolute Zentrierung ist (Modalboxen, Teile usw.). Wenn Sie jemanden nach CSS -Zentrieren fragen, sind die üblichen Antworten, die Sie erhalten,:Kennen Sie die Größe des Elements? Der Grund dafür ist, dass, wenn Sie die Elementgröße nicht kennen, die beste Lösung darin besteht, sich auf die CSS -Konvertierung zu verlassen. Dies reduziert die Browserunterstützung leicht, ist jedoch sehr flexibel. Wenn Sie keine CSS -Umwandlung verwenden oder die Breite und Höhe eines Elements kennen, können Sie sich auf negative Margen leicht verlassen.
Also macht unser Mixin im Grunde die folgende: Positionieren Sie die obere linke Ecke des Elements absolut in der Mitte des Behälters und bewegen Oder bewegen Sie es mit CSS -Umwandlung oder negativen Margen nach hinten, je nachdem, ob die Größe an den Mixin übergeben wird. Keine Größe: Verwenden Sie die Konvertierung;Dann können Sie es so verwenden:
<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 bauen
Okay, lass uns tiefer graben. Aus dem vorherigen Code -Snippet kennen wir bereits die Signatur von Mixin: Es verfügt über zwei optionale Parameter, $width und $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>Weiter. In jedem Fall erfordert Mixin die absolute Positionierung von Elementen, sodass wir von diesem Punkt an beginnen können.
<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>Wir müssen den Code geschickt schreiben. Lassen Sie uns hier innehalten und die verschiedenen Optionen analysieren, die wir haben:
| 宽度 | 高度 | 解决方案 |
|---|---|---|
| 未定义 | 未定义 | translate |
| 定义 | 定义 | margin |
| 定义 | 未定义 | margin-left translateY |
| 未定义 | 定义 | translateX margin-top |
Nutzen wir das.
<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>Jetzt, da wir das Framework für Mixin eingerichtet haben, müssen wir nur die Lücken mit der tatsächlichen CSS -Erklärung füllen.
<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> Hinweis: #{0 0} Fähigkeiten ist eine nicht so verarbeitete Technik, mit der Sass eine etwas übermäßig aggressive Komprimierung durchführt, was eher margin: mt 0 ml als margin: mt 0 0 ml verursachen kann
Gehen Sie einen Schritt weiter
Wir können verschiedene Dinge tun, um unser Mixin weiter zu verbessern, z. unterstützt oder nicht. Wir können auch strengere Überprüfungen der Parameter durchführen, um sicherzustellen, dass sie gültige Werte für Breite und Höhe sind.
@supports Sie müssen sich jedoch fragen, ob dies eine gute Sache ist. Die Schleifenkomplexität von Mixin selbst hat 6 erreicht, was für SASS -Helferfunktionen ziemlich viel ist. Es ist immer noch akzeptabel, aber das Hinzufügen von mehr Code kann zu einer weiteren Zunahme der Komplexität der Schleife führen.
Wie wäre es mit Flexbox?
Ich bin mir ziemlich sicher, dass einige von Ihnen in den Sitz springen und darüber nachdenken, wie wir Flexbox verwenden können, um ein Element in seinem übergeordneten Element zu zentrieren. In der Tat ist dies möglich, und es stellt sich heraus, dass dies die einfachste aller Lösungen ist, wenn die Bedingungen dies zulassen.
Der Hauptunterschied zwischen der gerade eingerichteten Lösung und der Flexbox -Lösung besteht darin, dass der letztere auf dem übergeordneten Element aufgebaut ist, während sich ersteres auf das untergeordnete Element konzentriert (vorausgesetzt, einer seiner Vorfahren ist unterschiedlich als statisch positioniert).
Damit ein Element seine untergeordneten Elemente zentrieren kann, müssen Sie nur drei Eigenschaften festlegen. Sie können einen Mixin, einen Platzhalter, eine Klasse oder ein beliebiges Element erstellen, das Ihnen dafür gefällt.
Unter der Annahme, dass Sie das entsprechende Anbieter -Präfix (über Mixin oder Autoprefixer) hinzugefügt haben, sollte diese Lösung in vielen Browsern "richtig funktionieren".
<code>/// 在其父元素中水平、垂直或绝对居中元素
/// 如果指定，此mixin将根据元素的尺寸使用负边距。否则，它将依赖于CSS转换，CSS转换的浏览器支持度较低，但由于它们与尺寸无关，因此更灵活。
///
/// @author Kitty Giraudel
///
/// @param {Length | null} $width [null] - 元素宽度
/// @param {Length | null} $height [null] - 元素高度
///
@mixin center($width: null, $height: null) { .. }</code>Wie Sie vermutet haben müssen, erzeugt es:
<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>Wir möchten, dass ein kurzes Mixin das Element in seinem Elternteil leicht zentriert. Es ist nicht nur klug genug, um zu arbeiten, unabhängig davon, ob das Element eine bestimmte Größe hat oder nicht, sondern auch eine freundliche und intuitive API, die sehr wichtig ist.
Wenn Sie sich den Code ansehen, kann jeder sofort verstehen, dass die
-Zeile eine Helferfunktion enthält, die eine gewisse Logik ausführt, um das Element in seinem übergeordneten Element zu zentrieren. Denken Sie jedoch daran, dass Letzteres (oder jedes übergeordnete Element im DOM -Baum) eine andere Position als statisch haben muss, damit diese Methode funktioniert! ;)
@include center Sie können diesen Code auf Sassmeister verwenden:
Das obige ist der detaillierte Inhalt vonZentrum mit Sass. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
