Sass와 함께 중심

코어 포인트

CSS, 특히 수직 센터링에서 센트는 까다로울 수 있습니다. SASS는 다양한 CSS 중심 방법을 사용하기 쉬운 믹스로 캡슐화 할 수 있습니다.

중심 방법은 요소 크기가 알려진지 여부에 따라 다릅니다. 알려지지 않은 경우 CSS 변환을 사용하여 유연성을 높이십시오. Sass Mixin은 컨테이너 중간에 요소의 왼쪽 상단 모서리를 배치하고 너비와 높이의 절반을 뒤로 이동시킵니다.

CSS 변환 지원을 확인하기위한
• 규칙을 포함 시키거나, 폭과 높이의 유효한 값인지 확인하기 위해
규칙을 포함하여 믹스 인을 더욱 향상시킬 수 있습니다.
• Flexbox는 부모 요소의 요소를 중앙에있는 또 다른 솔루션입니다. 조건이 허용되면 사용하기가 더 쉽습니다. Flexbox는 부모 요소에 세 가지 속성을 설정하여 자식 요소를 중심으로합니다.
• 중심 CSS는 항상 지루한 일이었으며 언어의 농담이되어 "우리는 우주 비행사를 달로 성공적으로 보냈지 만 CSS에서 수직으로 정렬 할 수는 없습니다"와 같은 농담을 이끌었습니다. @supports CSS는 중심, 특히 수직 중심을 다룰 때 CSS가 실제로 약간 까다 롭지 만, 이러한 농담은 약간 불공평하다고 생각합니다. 실제로 CSS의 컨텐츠를 중심으로하는 방법에는 여러 가지가 있습니다.
이 기사는 이러한 방법이 어떻게 작동하는지 설명하기위한 것이 아니라 사용 편의성을 위해 Sass Mixin에서 어떻게 캡슐화되는지 설명하기위한 것입니다. CSS 센터링에 약간 불편하다고 느끼면 미리 몇 가지 리소스를 읽는 것이 좋습니다.
• CSS를 중심으로하는 방법 CSS 중심 : 완전한 가이드
> 준비가 되셨습니까? 시작합시다.

개요

먼저, 우리는 부모 요소의 요소를 중심하는 데 중점을 둘 것입니다. 이는 절대 센터링 (모달 박스, 부품 등)의 가장 일반적인 사용 사례이기 때문입니다. CSS 중심에 대해 누군가에게 물어 보면, 당신이 얻는 일반적인 응답은 다음과 같습니다.

요소의 크기를 알고 있습니까? 그 이유는 요소 크기를 모르는 경우 가장 좋은 해결책은 CSS 변환에 의존하기 때문입니다. 이렇게하면 브라우저 지원이 약간 줄어들지 만 매우 유연합니다. CSS 변환을 사용할 수 없거나 요소의 너비와 높이를 알 수 있다면 음의 마진에 의존하기 쉽습니다.

따라서 우리의 믹스 인은 기본적으로 다음을 수행합니다. 컨테이너 중간에 요소의 왼쪽 상단을 절대적으로 배치 한 다음 크기가 믹스에 전달되는지 여부에 따라 CSS 변환 또는 음수 마진으로 뒤로 이동합니다. 또는 크기가 믹스 인과 높이로 전달되는지에 따라 CSS 변환 또는 음의 여백을 사용하여 폭을 뒤로 이동하십시오. 크기 없음 : 크기와 함께 사용;

그러면 다음과 같이 사용할 수 있습니다

컴파일 후 다음을 출력해야합니다

좋아, 이것은 약간 장점으로 보이지만,이 출력은 데모 목적으로만을위한 것임을 기억하십시오. 주어진 경우, 이러한 모든 방법을 동시에 사용하는 것은 가능성이 낮습니다.

• 빌드 믹스
좋아, 더 깊이 파고 들자. 이전 코드 스 니펫에서 우리는 이미 Mixin의 서명을 알고 있습니다. 와 $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>

이것을 사용합시다.

이제 우리는 Mixin의 프레임 워크를 설정 했으므로 실제 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>

참고 :

스킬은 Sass가 약간 지나치게 공격적인 압축을 수행하는 것을 방지하는 데 사용되는 정교한 기술이며, 이는

<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} margin: mt 0 ml 한 걸음 더 나아가 margin: mt 0 0 ml 우리는 CSS 변환 지원을 확인하기 위해 Mixin에 규칙을 포함 시키거나 CSS 전환이 있는지 여부에 따라 조건부 스타일을 출력하는 것과 같은 믹스 인을 더욱 향상시키기 위해 여러 가지 작업을 수행 할 수 있습니다. 지원 여부. 또한 폭과 높이의 유효한 값인지 확인하기 위해 매개 변수에 대한 엄격한 검사를 수행 할 수 있습니다.

그러나 그렇게하는 것이 좋은 일인지 스스로에게 물어봐야합니다. Mixin 자체의 루프 복잡성은 6에 도달했으며, 이는 Sass 도우미 기능의 경우 상당히 많습니다. 여전히 허용 가능하지만 더 많은 코드를 추가하면 루프 복잡성이 더욱 증가 할 수 있습니다.

Flexbox는 어떻습니까?

나는 여러분 중 일부가 좌석에 뛰어 들고 있으며, Flexbox를 사용하여 부모 요소의 요소를 중심으로하는 방법에 대해 생각합니다. 실제로, 이것은 가능하며, 조건이 허용되면 이것은 모든 솔루션 중에서 가장 쉽습니다. 방금 설정 한 솔루션과 Flexbox 솔루션의 주요 차이점은 후자가 부모 요소를 기반으로하는 반면, 전자는 자식 요소에 중점을 둔다는 것입니다 (조상이 정적과 다르게 배치 된 경우). 요소가 하위 요소를 중앙에 있으려면 세 가지 속성 만 설정하면됩니다. 믹스 인, 자리 표시 자, 클래스 또는이를 좋아하는 요소를 만들 수 있습니다.

관련 공급 업체 접두사 (Mixin 또는 AutoPrefixer를 통해)를 추가했다고 가정하면이 솔루션은 많은 브라우저에서 "올바르게 작동"해야합니다. @supports

당신이 짐작해야 할 것처럼, 그것은 다음을 생성합니다 :

최종 생각

우리는 짧은 믹스가 부모의 요소를 쉽게 중심으로하고 싶습니다. 요소가 특정 크기를 가지고 있는지 여부에 관계없이 작동하기에 충분히 똑똑 할뿐만 아니라 친절하고 직관적 인 API를 제공합니다. 이는 매우 중요합니다. 코드를 살펴보면 누구나 라인에 부모 요소의 요소를 중심으로 한 논리를 수행하는 도우미 함수가 포함되어 있음을 즉시 이해할 수 있습니다. 그러나이 방법이 작동하기 위해서는 후자 (또는 DOM 트리의 부모 요소)가 정적과 다른 위치를 가져야한다는 것을 기억하십시오! ;) <..> 당신은 sassmeister 에서이 코드를 사용할 수 있습니다 : https://www.php.cn/link/780bc6caf343bb06a4372c0821012624 .

(공간 제한으로 인해 FAQ 부품은 여기서 생략됩니다. FAQ 부품의 내용은 기사 내용에서 매우 복제되어 필요에 따라 스스로 추가 또는 수정할 수 있습니다.)

위 내용은 Sass와 함께 중심의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!