Sass. SCSS. grid system.

Sass.

Syntactically Awesome Style Sheet.

문법적으로 어썸한 스타일시트.

 

Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록

새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.

 

Sass는 중괄호 세미콜론이 없고 +, = 기호로 @mixin, @include를 대신합니다.SCSS가 Sass보다 CSS와 중괄호, 세미콜론을 쓴다는 점에서 유사합니다.

 

참고: https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!

 

3단계 반응형 예시입니다.

Mobile < 786px =< Tablet < 1200px <= Desktop

 

바뀌는 지점은 보통 디바이스 가로 px이며 7단계까지 break point를 정하기도 한다고해요.

 

unit 사이에 공간을 gutter라 하는데 unit에 gutter를 더한 것이 1column이므로

column 수에 따라 1column을 곱해준 것이 container-size라고 생각할 수 있다.

 

데스크탑은 container-size가 고정 px로 정해지면 그보다 큰 px에 대해 전부 magin: auto 0; 처리를 해버리면 그만이지만

태블릿과 모바일 기기는 width가 천차만별이라 모든 디바이스에 화면에 꽉차게 처리하려면

100% - 20px 이런 식으로 전체 디바이스 넓이에 좌우 마진값을 빼준 값을 container-size로 갖는다.

참고로 unit사이즈도 고정 px이 아닌 것이다.

 

태블릿은 일정 width에서 테스크탑처럼 좌우 마진 auto를 설정해도 됨으로 디자인에 따라 max-container-size를 설정해도 안해도 된다.

 

부트스트랩 그리드 시스템에 맞게 코드를 작성해보면,

.container { //컨텐츠가 들어갈 폭 설정. container-size.

  width: 100%;

  padding: 0 $sm-margin; //$sm-margin값을  constants폴더에 따로 선언해서 사용한다.

  margin: 0 auto;

 

    .row { //column을 가로배치 하기위한 설정. 가로배치는 float와 flex 두가지 방법이 있는데 flex를 쓰는 추세.

      display: flex;

      flex-wrap: wrap; //column공간이 부족할 때 아래로 떨어뜨리기 위함. 

  }

 

  //속성 선택자. col- 로 시작하는 모든 클래스를 선택.

  [class^='col-'] {

    padding: 0 $gutter / 2;

  }

 

   @for $i from 1 through $sm-columns { //$sm-columns는 상수로 설정.

      .col-sm-#{$i} { // #{ } 로 감싸기

        width: $i / $sm-columns * 100% // 위에서 모든 col-에 거터를 패딩으로 줬기 때문에 옆에 식에 해당되는 width에 거터만큼 깎인다. 그려보면 이해가 된다.

      }

   }

 

   @include responsive(T) { //Tablet 관련 mixin. 다음에 정리해보겠다.

      max-width: $md-max-container;

      padding: 0 $md-margin;

 

       @for $i from 1 through $sm-columns { 

      .col-sm-#{$i} { 

        width: $i / $md-columns * 100% 

      }

   }

 

   @include responsive(D) { //Tablet 관련 mixin. 다음에 정리해보겠다.

      max-width: $lg-max-container;

      padding: 0;

 

       @for $i from 1 through $lg-columns { 

      .col-sm-#{$i} { 

        width: ($lg-unit + $gutter) * $i;

      }

    }

  }

}

 

상수설정하고 mixin, for 반복문을 쓰니까 진짜 말도안되게 css를 처리해줄 수 있었다.

나중에 코드리뷰를 할때도 여기에 왜 이 값이 쓰였는지도 상수설정했기때문에 쉽게 읽히고

코드 수정할때 전부 알맞게 계산되서 바뀌니까 재사용도 용이하다. SCSS 굳!