[Jekyll] SCSS 사용법

Category: Jekyll | July 08, 2020

준비물

scss 파일 (main.scss), _sass 디렉토리

SCSS 맛보기

[CSS]

.colbox2 ul {
    max-width: 99%;
}

.colbox2 ul li {
    list-style: none;
    float: left;
}

[SCSS]

.colbox2 {
    ul (
       max-width: 99%;
       li {
            list-style: none;
            float: left;
       } 
    )
}

이외에도 mixins로도 사용할 수 있음.

다행히도, Jekyll에서는 별도의 설치 없이 지원하므로 그냥 사용하면 됨.

설정 방법

  1. _sass 디렉토리에 준비된 main.scss파일을 만듦. 이 main.scss에는 세부 설정 내용이 들어가 있어야 함

  2. assets/css 디렉토리에 빈파일인 main.scss 파일 생성 (이름은 달라도 됨. )

  3. assets/css 안에 있는 main.scss 파일에 아래와 같이 입력함.

---
---

@import "main";

위와 같이 쓰면 (이름이 같아서 햇갈릴 수 있지만) _sass/main.scss파일을 불러들임.

  1. header에 assets/css/main.scss 써 줌.