📚 [CSS] SCSS 사용법

Category: CSS | 📅 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 디렉토리에 준비된 base.scss파일을 만듦.
    이 base.scss에는 세부 설정 내용이 들어가 있어야 함

  2. assets/css 디렉토리에 빈파일인 main.scss 파일 생성하고 아래와 같이 입력함.

---
---

@import "base";

위와 같이 쓰면 알아서 _sass/base.scss파일을 불러들임.

  1. head 에 assets/css/main.scss 써 줌.
<head>
     <link rel="stylesheet" href="/assets/css/main.css" />
</head>
🏷️ Tags
  • #scss  
  • #css