당사의 css도 드디어 scss화를 실시(에?지금? 푸핏 ), 자동화도 진행 꽤 효율적으로 작업을 할 수 있게 되었습니다.

도입 준비

Gulp 설치

가이드 라인 만들기

sass-lint 설정

.csscomb.json 설정

Gulp의 설치 시스템은, 잘 하는 분에게 해 주셔서 나는 가이드라인이나 css방향의 설정을 담당했습니다 .

신규 참가자용으로 코딩의 가이드라인을 web화하고 있었으므로, 그쪽에 Sass, Gulp의 도입 매뉴얼이나 가이드라인을 추가.

가이드라인 만들기

주로 다음 항목으로 정리했습니다.

파일 구성

scss 부하에 대하여

sass-lint 소개

Sass 코딩의 주의점

1. 파일 구성

리포지토리 부하를 설명. 컴파일되는 css와 실제로 작업하는 scss, HTML을 구성하는 모듈의 파트, 이미지를 관리하는 폴더, 컴파일되는 이미지의 위치 등을 트리로 표현했습니다.

2.scss 부하에 관하여

실제로 작업하는 scss 내의 구성도 @import와 모듈 단위로 scss 관리, 각각의 관계를 트리로 표현했습니다.

3.sass-lint 정보

htps : // 기주 b. 이 m / 지금 s와 ls / 지금 s - t / t ree /
를 참고로 번역하면서 설정＆자신용도 겸해 메뉴얼을 작성했습니다. (솔직히 이것이 가장 힘들었다 )

4. Sass 코딩의 주의점

코딩 기법, 작업 흐름에 대한 설명.
모처럼 sass로 하기 때문에, 세세하게 모듈로 나누어 관리하자고 생각했지만, 카테고리에 대해서 모듈수가 많아, css는 카테고리마다 정리하고 싶었으므로 @import로 정리하는 방법을 채용. 이 근처는 Gulp에 자세한 분과 상담해 설계로부터 생각했습니다.

sass화의 장점 가이드라인 의도

sass를 채용함에 있어 보다 구조적인 사고방식이 생기므로 쓸데없는 css를 생략하거나 html 구조를 보다 상상하기 쉬워진다고 개인적으로는 생각합니다.

들여 쓰기를 최소화하면 쓸데없는 CSS와 중복 CSS를 줄일 수 있습니다.

(또 다른 기사에 정리합니다만) 구조적인 생각을 하는 것으로 문서 구조를 의식할 수 있어 HTML도 상상하기 쉽다.

프로퍼티나 셀렉터의 순서를 지정하는 것으로 「큰 정리로부터 작은 정리」가 되어, 의도한 것에 자연과 가까워진다.

.csscomb.json을 도입하는 것으로, 프로퍼티의 순서가 자동으로 재정렬되고 통일되기 때문에 매우 편합니다.

Gulp의 플러그인으로 벤더 프리픽스의 자동 부여나 이미지의 압축, css의 minify화가 자동으로 실시할 수 있으므로 효율적.

.csscomb.json

htp : // css mb. 코 m / 곤후 g
↑로 간단하게 설정 파일을 만들 수 있습니다.
들여 쓰기도 자동으로 해 주고, scss의 성형 룰이 어느 정도 오리지날로 작성할 수 있으므로, 사용법에 따라서는 매우 편리. (comb가 악하다는 소문도 있습니다만, 복잡한 일을 하지 않으면 잘 사용할 수 있을까,라고)

마지막으로, 팀에서 해 나가는데 있어서 룰의 계승이나 전달·의사 통일이 꽤 어렵습니다.
아무래도 바쁘게 되어 버리면, 섬세한 것이 더욱 엉망이 되어 버립니다.
설명이 좋지 않기 때문에 "이것을 봐!