Sass/SCSS 개요

CSS Preprocessor에 대해

---

Sass는 CSS Preprocessor(전처리기)이다.

CSS는 작업이 고도화될수록 불필요한 선택자의 과용, 연산 기능의 한계, 구문의 부재 등의 문제가 생긴다.

CSS가 동작하기 전에 사용하는 기능이고, CSS의 불편함을 없애기 위해 사용한다.

 

 

 

Sass와 SCSS의 차이점

---

Sass의 3버전에서 새롭게 등장한 SCSS는 CSS구문과 완전한 호환을 제공하고, Sass의 모든 기능을 지원한다.

즉 SCSS는 CSS와 거의 비슷한 문법을 사용하며 Sass 기능이 지원된다.

 

{ } 와 ; 의 유무에서 차이를 보인다.

 

-Sass의 경우

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

-SCSS의 경우

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

 

 

Mixins의 경우에도 차이가 존재합니다.

    *Mixins : 재사용 가능한 기능을 만드는 방식

 

-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 로 Mixins 기능을 사용하고 있다.

 

 

 

Sass의 사용법

---

Sass는 CSS와 달리 선택자의 중첩, 조건문, 반복문 등의 기능을 사용할 수 있다.

그러나 웹에서는 CSS만 동작하기 때문에 Sass는 직접적으로 동작시킬 수 없다.

따라서 다음과 같은 방법으로 사용한다.

 

Sass로 코드 작성 -> CSS로 컴파일한 코드를 웹에서 사용

 

컴파일할 때는 컴파일러가 필요한데, SassMeister 혹은 Parcel를 사용한다.

 

-SassMeister

https://www.sassmeister.com/

SassMeister | The Sass Playground!

 

Sass 코드를 작성하여 CSS로 컴파일

 

-Parcel

node.js 환경이 세팅되어있어야 사용이 가능하다.

 

먼저, index.html 파일을 다음과 같이 작성한다.

index.html 파일 작성

main.scss 파일을 다음과 같이 작성해주고, index.html 파일에 link 태그를 이용해 이 scss파일과 연동시켜준다.

main.scss 파일 작성

터미널에서 package.json 파일을 생성한다.

package.json 파일 생성

npm install -D parcel-bundler 명령어로 parcel-bundler를 설치한다.

parcel-bundler 설치

package.json 파일에서 parcel-bundler가 설치된 것을 확인한다.

parcel-bundler 설치된 것 확인

npx parcel index.html 명령어를 이용해 parcel이 scss 파일 컴파일에 필요한 모듈들을 자동으로 설치해준다.

built 후 localhost 주소로 접근하면, parcel이 index.html을 컴파일 해주어 화면에 출력한 것을 확인할 수 있다.

 

npx parcel index.html

웹페이지에 출력

main.scss파일의 .item의 width를 변경해주면 실시간으로 변경된 모습을 확인할 수 있다.

width 변경

늘어났다!