Sass(scss) 도입~

3088 단어 SassscssCSS 설계
당사의 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가 악하다는 소문도 있습니다만, 복잡한 일을 하지 않으면 잘 사용할 수 있을까,라고)

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

    좋은 웹페이지 즐겨찾기