재단-Sass Mixins

가져 오기

scss / util / _mixins.scss 파일 아래에있는 SASS 믹스 인의 내용을 가져옵니다 . 다음 코드 줄을 사용하여 SASS 믹스 인을 가져올 수 있습니다.

@import 'util/mixins';

Sass 참조

SASS 함수를 사용하여 구성 요소의 스타일을 변경할 수 있습니다.

믹스 인

다음 믹스 인을 사용하여 구성 요소에 대한 CSS 클래스 구조를 구축 할 수 있습니다.

CSS-TRIANGLE

드롭 다운 화살표, 드롭 다운 핍 등을 만드는 데 사용됩니다. 기존 요소에 삼각형을 연결하기 위해 <i> & :: before </ i> 또는 <i> & :: after </ i> 선택기를 사용합니다. 다음 형식을 사용합니다-

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

그것은 표에 지정된 다음 매개 변수를 사용합니다-

Sr. 아니.	매개 변수 및 설명	유형	기본값
1	$triangle-size 삼각형의 너비를 정의합니다.	번호	없음
2	$triangle-color 삼각형의 색상을 정의합니다.	색깔	없음
삼	$triangle-direction 위쪽, 오른쪽, 아래쪽 또는 왼쪽과 같은 삼각형의 방향을 정의합니다.	예어	없음

HAMBURGER

너비, 높이, 막대 수 및 색상으로 메뉴 아이콘을 만드는 데 사용됩니다. 다음 형식을 사용합니다-

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

그것은 표에 지정된 다음 매개 변수를 사용합니다-

Sr. 아니.	매개 변수 및 설명	유형	기본값
1	$color 아이콘의 색상을 정의합니다.	색깔	없음
2	$color-hover 아이콘 위에 마우스를 올려 놓을 때 색상을 정의합니다.	색깔	없음
삼	$width 아이콘의 너비를 정의합니다.	번호	없음
4	$height 아이콘의 높이를 정의합니다.	번호	없음
5	$weight 아이콘에있는 개별 막대의 무게를 정의합니다.	번호	없음
6	$bars 아이콘의 막대 수를 정의합니다.	번호	없음

BACKGROUND-TRIANGLE

요소에 배경 이미지를 지정하는 데 사용됩니다. 다음 형식을 사용합니다-

@include background-triangle($color);

그것은 표에 지정된대로 매개 변수를 사용합니다-

Sr. 아니.	매개 변수 및 설명	유형	기본값
1	$color 삼각형의 색상을 정의합니다.	색깔	$ 블랙

CLEARFIX

이 믹스 인은 자동으로 자식 요소를 지워서 추가 마크 업이 필요하지 않습니다. 다음 형식을 사용합니다-

@include clearfix;

AUTO-WIDTH

컨테이너에있는 요소의 수에 따라 요소의 크기를 자동으로 조정합니다. 다음 형식을 사용합니다-

@include auto-width($max, $elem);

표에 지정된대로 다음 매개 변수를 사용합니다-

Sr. 아니.	매개 변수 및 설명	유형	기본값
1	$max 컨테이너의 최대 항목 수를 식별합니다.	번호	없음
2	$elem 형제 선택자에 태그를 사용합니다.	예어	리

DISABLE-MOUSE-OUTLINE

마우스 입력 동작을 식별 할 때 요소 주위의 윤곽선을 비활성화하는 데 사용됩니다. 다음 형식을 사용합니다-

@include disable-mouse-outline;

ELEMENT-INVISIBLE

요소를 숨기는 데 사용되며 키보드 및 기타 장치에서 사용할 수 있습니다. 다음 형식을 사용합니다-

@include element-invisible;

ELEMENT-INVISIBLE-OFF

보이지 않는 요소를 제거하고 element-invisible () 믹스 인 을 사용하여 CSS 출력을 반전하는 데 사용됩니다 . 다음 형식을 사용합니다-

@include element-invisible-off;

VERTICAL-CENTER

다음 형식을 사용하여 정적이 아닌 상위 요소 내부에 요소를 수직으로 배치하는 데 사용됩니다.

@include vertical-center;

HORIZONTAL-CENTER

다음 형식을 사용하여 비 정적 부모 요소 내부에 요소를 수평 중앙에 배치하는 데 사용됩니다.

@include horizontal-center;

ABSOLUTE-CENTER

다음 형식을 사용하여 비 정적 부모 요소 내부에 절대적으로 요소를 배치하는 데 사용됩니다.

@include absolute-center;