[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 39회차 미션

Sass 개요

Sass는 기본적으로 CSS를 알고 있는 상태에서 학습 해야한다.

CSS는 상대적으로 배우기 쉽고 재밌다. 웹 개발 초심자에게 접근하기 좋다.

하지만 작업이 고도화될수록 CSS를 작성하는데 불편함이 많아진다. 웹에서는 표준 CSS만 동작하기 때문에 Sass로 쉽게 작성을하고 컴파일하는 과정을 통해 CSS문법으로 다시 변환을 시킨다.

CSS Preprocessor란?

웹에서는 기본적으로 CSS만 동작하기 때문에 CSS를 작성하기 전에 Sass,Less를 사용해서 편하고 쉽게 작성을 하고 변환시킨다. 따라서 CSS가 웹에서 돌아가기 전단계에 동작하기 때문에 CSS 전 처리기 혹은 CSS Preprocessor라고 부른다.

CSS Preprocessor(전 처리기) 에는 여러 종류가 있다.

대표적으로 Sass(SCSS), Less, Stylus 가 있다.

기본적으로 Sass는 Less나 Stylus 보다 먼저 나왔다. 그래서 커뮤니티도 많고 성숙도가 높다.

Sass와 SCSS의 차이점

기본적으로 내용은 같다. 하지만 작성하는 문법이 조금 다르다. SCSS 같은 경우에는 Sass의 3번째 버전에서 새롭게 등장했다. SCSS는 CSS 구문과 완전 호환되도록 새로운 구문을 도입해 만든 것이다.

div{
  color:red;
  width:100px;
  padding: 10px;
}
div li{
  font-size: 1rem;
}

CSS 예제

위의 예제를 Sass와 SCSS로 바꿔본다.

div
  color: red
  width: 100px
  padding: 10px

  li
    font-size: 1rem

→ Sass

div {
  color: red;
  width: 100px;
  padding: 10px;

  li {
    font-size: 1rem;
  }
}

→ SCSS

• Sass는 {} 중괄호와 ; 세미콜론이 존재 하지않는다.

  →SCSS는 중괄호와 세미콜론이 없기 때문에 CSS를 그대로 가져왔을때 문제가 안생긴다.

• SCSS에는 mixin이라는 개념이 있다.

  → mixin : 재사용 가능한 기능을 만드는 방식

    /* Sass */
    =border-radius($radius)
      -webkit-border-radius: $radius
      -moz-border-radius:    $radius
      -ms-border-radius:     $radius
      border-radius:         $radius
  
    .box
      +border-radius(10px)

    /* SCSS */
    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
          -ms-border-radius: $radius;
              border-radius: $radius;
    }
  
    .box { @include border-radius(10px); }

  Sass 는 = 과 + 기호로 mixins 기능을 사용하고, SCSS는 @mixin과 @include로 기능을 사용했다.

컴파일 방법

컴파일 하는 방법이 많지만, Sass 컴파일러를 설치하는 것이 부담 될 수 있다. SassMeister를 사용해서 웹에서 컴파일 할 수 있다.

https://www.sassmeister.com/

왼쪽에서 작성한 Sass 문법이 CSS문법으로 변환되게 되는 사이트이다.

바로 작성하면 안되고 상단의 Options 탭에서 SCSS로 선택해주고 Compiler를 libsass v3.5.4 로 선택해 준 뒤, 작성을 해주면 된다.(현재는 v3.5.5로 업데이트 됨)

//SCSS

.container{
    width:100px;
    .item{
        width:200px;
    }
}

를 작성해본다.

container의 가로사이즈를 100px;로 준뒤 우측에 CSS창을 보면 SCSS와 똑같이 보인다.

하지만 중첩을 적용해보면 차이점을 알 수 있다.

item이라는 class를 가진 요소는 가로사이즈가 200px; 이게 되도록 설정해보면

/* CSS 문법 */
.container {
  width: 100px;
}

.container .item {
  width: 200px;
}

container의 자식인 item이라는 클래스를 검색해서 적용시키게 된다.

 

 

 

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스