CSS의 정의 방법 체계: 선택기와mixin의 정의 방법에 따라 구분하여 사용

1. 개요

CSS 관점에 대한 의사록을 작성합니다.

프로그래머의 관점에서 디자인 이론에서 언급하지 않은 부분을 고려한다.

SASS를 이용하여 CSS를 제작합니다.(2021년까지 Dart-sass+SCSS가 많았음)

DRY, KISS의 원칙에 근거한다.

불필요한 문자열을 사용하지 않고 이름을 최대한 간소화합니다.(예비 없음)

스타일의 정의 방법으로서 선택기와mixin이 정의한 두 가지 형식으로 나뉜다.
함수는 수치 계산 등에 사용되며 정의에 사용되지 않습니다.

HTML 요소, id, class 등을 정의하고 스타일을 정의합니다.

CSS로 사용자에게 보내는 브라우저입니다.(정의 및 실행 수반)

자신의 이름으로 스타일을 정의한다.

는 여러 정의의 단축키를 모으는 역할을 한다.

CSS를 직접 생성하거나 브라우저에 보내지 않습니다.(정의만 하고 실행하지 않음)

유니버설 스타일의 정의는mixin에 단축키를 만들어서 선택기에 사용합니다.

브라우저에서 실제로 사용되지 않기 때문에 예상치 못한 방해를 방지할 수 있습니다.

선택기의 정의가 화면에 영향을 미친다.널리 사용함으로써 CSS의 정의 수를 줄일 수 있다.

상술한 바와 같이 무의식적으로 여러 정의를 제정함으로써 예상치 못한 영향을 미칠 수 있다.

선택기 이름의 방법과 원본의 설정을 고려하여 가능한 한 최소한의 수량으로 정의하면 문제를 줄일 수 있다.

화면에 영향을 주지 않기 때문에 통용되고 미세한 정의는mixin으로 예상치 못한 영향을 억제할 수 있다.

다른 한편, 믹슨은 교체되고 CSS의 사이즈는 증가한다.

선택기의 정의를 최소화하고 그 중에서 호출한 결과 합계가 비교적 적은 코드 수가 나왔다.

표준적인 정의 방법과mixin 등의 정의를 조합하여 화면의 위젯을 정의한다.

_box.scss

@use "config" as c;

.g-box {
  border: solid 1px map-get(c.$color-set, "box-line-gray");
}

화면 위젯이 아니라 일반적이고 작은 범위를 정의하는 위젯입니다.

한 줄로 여러 줄을 호출할 수 있다.

css의 기준에서 분명히 간단한 것인데도 별명을 붙여 이해하기 쉽게 했다.

_magin.scss


@mixin h-center-margin {
  margin-left: auto;
  margin-righ: auto;
}

@mixin v-center-margin {
  margin-top: auto;
  margin-bottom: auto;
}

나는 선택기와 믹스를 교묘하게 분리해서 사용하면 예상치 못한 영향을 줄일 수 있고 구축된 CSS의 코드 크기를 억제할 수 있다고 생각한다.

이 문제에 관하여(CSS의 정의 방법 체계: 선택기와mixin의 정의 방법에 따라 구분하여 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/sfitb/articles/c7c27c59027640

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다