SCSS 스타일 가이드

GitLab 프론트엔드 개발에서 SCSS 작성 시 유틸리티 클래스, 반응형 디자인, 네이밍, 중첩, 선택자, 린팅 등의 스타일 규칙을 설명합니다.

유틸리티 클래스 # 사이트가 성장함에 따라 더 많은 CSS가 생성되는 것을 줄이기 위해, 새 CSS를 추가하는 것보다 유틸리티 클래스 사용을 권장합니다. 복잡한 경우에는 컴포넌트 클래스를 추가하여 CSS를 처리할 수 있습니다. CSS 유틸리티 클래스는 어디에 정의되어 있나요? # 유틸리티 클래스는 Tailwind CSS 에 의해 생성됩니다. Tailwind CSS 클래스를 확인하는 방법은 세 가지가 있습니다: GitLab Tailwind CSS 문서 : GitLab Tailwind 구성에 특화된 문서 사이트입니다. 사용 가능한 모든 Tailwind CSS 클래스를 검색할 수 있는 목록을 제공합니다. Tailwind CSS 자동완성 : VS Code 또는 RubyMine에서 사용할 수 있습니다. Tailwind CSS config viewer : 디자인 시스템에 특화된 Tailwind CSS 클래스(간격, 색상, 크기 등)를 시각적으로 보여줍니다. 사용 가능한 모든 Tailwind CSS 클래스를 표시하지는 않습니다. 어떤 CSS 유틸리티 클래스가 deprecated되었나요? # common.scss 의 클래스는 deprecated 예정입니다. 디자인 시스템에 맞지 않는 값을 사용하는 common.scss 의 클래스는 사용하지 않아야 합니다. 대신 규격에 맞는 값을 가진 클래스를 사용하세요. Bootstrap의 유틸리티 클래스 는 사용하지 마세요. Bootstrap의 유틸리티 클래스 를 GitLab UI 유틸리티 클래스로 마이그레이션할 때, margin과 padding 클래스가 서로 다름에 주의하세요. GitLab에서 사용하는 크기 척도는 Bootstrap 라이브러리의 척도와 다릅니다. Bootstrap의 padding 또는 margin 유틸리티를 사용하는 경우, 동일한 시각적 결과를 얻으려면 적용한 유틸리티 크기를 두 배로 늘려야 할 수 있습니다(예: ml-1 이 gl-ml-2 로 변경됨). Tailwind CSS # 2024년 8월부터 CSS 유틸리티 제공자로 Tailwind CSS 를 사용하고 있습니다. 이는 이전에 사용하던 커스텀 솔루션을 대체합니다. 도입 동기, 제안, 구현 세부 사항은 Tailwind CSS 설계 문서 를 참고하세요. Tailwind CSS 기본 사항 # 아래에서 Tailwind CSS의 기본 사항과 Pajamas 디자인 시스템 을 사용하도록 구성된 방식에 대한 정보를 확인할 수 있습니다. 더 자세한 가이드는 공식 Tailwind CSS 문서 를 참고하세요. 접두사 # 모든 유틸리티 클래스에 gl- 접두사가 붙도록 Tailwind CSS에 prefix 를 구성했습니다. 반응형 유틸리티 또는 상태 수정자를 사용할 때는 접두사가 콜론 뒤에 위치합니다. 예시 : gl-mt-5 , lg:gl-mt-5 . 반응형 CSS 유틸리티 클래스 # 반응형 CSS 유틸리티 클래스 는 중단점 이름 뒤에 : 문자가 붙는 형식으로 접두사가 붙습니다. 사용 가능한 중단점은 tailwind.defaults.js#L44 에 구성되어 있습니다.