Skip to main content Link Search Menu Expand Document (external link)
Python Cording Example

assets

Table of contents

  1. Sass
  2. scss/sass 상세 설명
  3. assets 상세
    1. Sass/SCSS
    2. Coffeescript

Jekyll 에서 CSS, JS, 그림과 그 밖의 다른 에셋들을 사용하는 것은 아주 직관적입니다. site folder에 이들을 놓으면 built site로 복사될 것입니다.

Jekyll 사이트는 에셋들을 정돈하는데에 이런 구조를 자주 사용합니다:

.
├── assets
│   ├── css
│   ├── images
│   └── js
...

Sass

_includes/navigation.html 에 사용했었던 스타일은 좋은 방법이 아닙니다. 클래스를 사용해서 이 페이지에 스타일을 입혀봅시다.

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %}class="current"{% endif %}>{{ item.name }}</a>
  {% endfor %}
</nav>

표준 CSS 파일을 사용해서 스타일을 정의할 수도 있겠지만, 여기서는 한 걸음 더 나아가 Sass 를 사용해보겠습니다. Sass 는 CSS를 Jekyll에 바로 굽는 환상적인 확장 기능입니다.

먼저 assets/css/styles.scss 에 Sass 파일을 생성하고 다음 내용을 입력합니다:

---
---
@import "main";

파일 상단에 있는 빈 front matter는 Jekyll에게 이 파일을 처리하라고 알려줍니다.
@import "main"은 Sass 에게 sass 디렉토리 (기본값: _sass/, 사이트의 루트에 존재) 에 있는 main.scss 파일을 찾도록 지시합니다.

현 시점에서는 메인 CSS 파일 하나밖에 없습니다. 더 큰 프로젝트에서는, 이 방법이 CSS 를 조직화하는 가장 좋은 방법입니다.

Sass 파일을 _sass/main.scss 에 생성하고 다음 내용을 입력합니다:

.current {
  color: green;
}

layout에서 이 스타일시트를 참조해야 합니다.

_layouts/default.html 을 열고 <head> 에 이 스타일시트를 추가합니다:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

여기서 참조하는 styles.css 는 앞서 assets/css/ 에 만든 styles.scss 로부터 Jekyll 이 생성한 파일입니다.

브라우저로 http://localhost:4000 를 열고 네비게이션에서 현재 링크가 초록색인 것을 확인합니다.

scss/sass 상세 설명

sass/scss

assets 상세

Jekyll 은 Sass 를 기본적으로 지원하고 루비 젬을 통해 CoffeeScript 와 연동할 수 있습니다. 사용 방법은, 일단 적절한 확장자 (.sass 나 .scss, .coffee 중 하나) 로 파일을 생성하고 파일의 시작부분에 3 개의 대시문자 두 줄을 입력해야 합니다. 이렇게 말이죠:

---
---

// start content
.my-definition
  font-size: 1.2em

Jekyll 은 이 파일들을 일반 페이지와 동일하게 다루기 때문에, 해당 파일에 대한 결과물은 원본과 동일한 디렉토리에 저장됩니다.
예를 들어, Site Source folder(assets)에 css/styles.scss 라는 파일을 가지고 있는 경우, Jekyll 은 해당 파일에 필요한 작업을 처리한 후 Site Destination folder( _site )의 css/styles.css 에 그 결과물을 저장합니다.

Jekyll 은 에셋 파일의 모든 Liquid 필터와 태그를 처리합니다

만약 Mustache 를 사용하거나 Liquid 템플릿 문법과 충돌하는 다른 JavaScript 템플릿 언어를 사용하고 있다면, 해당 코드 앞뒤에 {% raw %} 와 {% endraw %} 태그를 사용해야 합니다.

Sass/SCSS

Jekyll 로 Sass 변환을 당신만의 방법으로 사용자화 할 수 있습니다.

관련된 파일(Partials)을 sass_dir (디폴트: <source>/_sass) 에 넣습니다. Main SCSS 나 Sass 파일은 <source>/css 처럼 결과 파일이 생성되어야 하는 위치에 맞춰 넣습니다. 이에 대한 예시로, [Jekyll 의 Sass 기능을 사용한 예제 ]를 살펴보세요.

두 종류의 Sass 파일이 있습니다 :

  1. Main files - CSS 파일로 출력되기를 원하는 파일
  2. Partials - @import 문의 main files에 의해 사용되어지는 것 Main files은 페이지와 같습니다 – 출력하려는 위치로 이동하며 상단에 YAML front matter(—)이 포함되어 있습니다. Partials는 숨겨진 Jekyll 데이터와 같다 - 밑줄이 그어진 디렉토리에 있으며 기본값은 _sass입니다. 사이트는 다음과 같을 수 있습니다 :
    .
    | - _sass
      | - _typography.scss
      | - _layout.scss
      | - _colors.scss
    | - stylesheets
      | - screen.scss
      | - print.scss

    _site 디렉토리의 출력은 다음과 같습니다 :
    .
    | - stylesheets
      | - screen.css
      | - print.css

이제 SCSS / Sass가 모든 적절한 입력으로 CSS로 변환되었습니다.

만약 Sass 의 @import 선언을 사용한다면, 환경설정 옵션 sass_dir 에 Sass 파일이 들어있는 디렉토리를 지정해야 합니다:

sass:
    sass_dir: _sass

Sass 변환기가 사용하는 환경설정 옵션 sass_dir 의 디폴트 값은 _sass 입니다.

오직 Sass 만이 sass_dir 을 사용합니다

sass_dir 은 Sass 의 import 대상 경로 그 이상도 그 이하도 아닙니다. 이것은 Jekyll 이 이 파일들에 대하여 직접적으로 알지 못한다는 뜻입니다. 이 곳의 어떤 파일은 앞서 설명한 것과 같이 empty front matter을 가지고 있어서는 안됩니다). 그렇지 않으면 변환 작업을 거치게 되지 않을것입니다. 이 폴더 안에는 import 로 사용할 파일(Partial)만 있어야 합니다.

또, _config.yml 파일에 style 옵션을 설정하여 출력 스타일을 선택할 수 있습니다:

sass:
    style: compressed

이 설정은 Sass 에 그대로 전달되므로, Sass 가 지원하는 output style option이라면 무엇이든 여기에 사용할 수 있습니다.

Coffeescript

Jekyll 3.0 과 그 이후 버전에서 Coffeescript 를 활성화하려면

  • 루비 젬 jekyll-coffeescript 를 설치하고
  • _config.yml 이 최신 상태이고 아래 내용을 포함하고 있어야 합니다:
plugins:
  - jekyll-coffeescript