이전에 비슷한 기사을 썼는데 필요하지 않은 패키지를 설치하는 등 미묘한 느낌이 들었기 때문에 다시 작성했습니다.

Sass is 무엇?

공식에 따르면

CSS with superpowers

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

CSS 확장 언어입니다!

그건 그렇고, Sass는 Syntactically Awesome StyleSheets
구조적으로 잘 생긴 스타일 시트

그렇습니다!

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

이와 같이 ruby 라이크한 기술을 할 수 있어 프로그래밍 언어처럼 쓸 수 있는 것으로 보수성이나 가독성이 높아진다고 하는 뛰어난 것입니다!

(물론 CSS에 익숙한 사람을 위해 기존 CSS가 그대로 사용할 수 있는 기법도 준비되어 있어요!)

Sass 공식

Sass 설치

전회는 여러가지 시행착오했지만, 이 3개를 인스톨하면 이용할 수 있습니다.

> npm install -D node-sass sass-loader @nuxtjs/style-resources

※ Vuetify 를 이용하는 경우는 최신 버전이라면 에러가 되므로 [email protected]

기법에 대해

SASS 기법

처음에 쓴 것처럼 Sass

<style lang="sass">
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none
</style>

처럼 쓸 수 있습니다.

SCSS 기법

기존 CSS를 그대로 사용하고 싶거나, CSS의 기법에 저항이 없는 사람의 경우는 SCSS기법이라고 하는 것도 있습니다.

여기를 사용하면 평소 CSS를 그대로 이용할 수 있습니다!

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

컴파일 결과

위의 기법을 이용해도 다음과 같은 CSS로 컴파일됩니다.

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

편리하네요!

글로벌 CSS (SCSS) 설정

Bulma를 비롯한 UI 프레임워크를 도입한 경우, 그들이 제공하는 스타일을 글로벌하게 이용하고 싶은 경우가 있습니다.

그러한 경우의 설정 방법입니다.

(Bulma를 샘플로하고 있습니다)

글로벌 CSS

~/assets/main.scss

// Bulma の Elements をインポート
@import "~bulma/sass/elements/box";
@import "~bulma/sass/elements/button";
@import "~bulma/sass/elements/container";
@import "~bulma/sass/elements/content";
@import "~bulma/sass/elements/form";
@import "~bulma/sass/elements/icon";
@import "~bulma/sass/elements/image";
@import "~bulma/sass/elements/notification";
@import "~bulma/sass/elements/progress";
@import "~bulma/sass/elements/table";
@import "~bulma/sass/elements/tag";
@import "~bulma/sass/elements/title";
@import "~bulma/sass/elements/other";

이 방법으로 프레임워크에서 사용하려는 스타일을 가져온 파일을 준비합니다.

그리고는, nuxt.config.js 로 설정하는 것만.

nuxt.config.js

module.exports = {

  // 省略

  /*
  ** Global CSS
  */
  css: [
    '~/assets/main.scss'
  ],

  // 省略
}

Mixin, 변수 등을 구성 요소로 사용

챕터와 같지만 프레임워크에서 제공하는 Mixin 및 변수를 사용하려면 @nuxtjs/style-resources 를 사용하여 로드합니다.

~/assets/utilities.scss

@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";
@import "~bulma/sass/utilities/derived-variables";
@import "~bulma/sass/utilities/animations";
@import "~bulma/sass/utilities/mixins";
@import "~bulma/sass/utilities/controls";

프레임워크가 제공하는 변수 등을 가져온 파일을 준비합니다.

그리고는, nuxt.config.js 로 설정하는 것만.

nuxt.config.js

module.exports = {

  // 省略

  modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    sass: ['~/assets/utilities.scss']
  },

  // 省略
}

또한이 utilities.scss를 이전에 만든 main.scss로 가져 와서 전 세계적으로 사용할 수 있습니다.

~/assets/main.scss

@import "utilities";

요약

전회는 힘 부족으로, 미묘한 정보를 제공해 버렸습니다만(그 나름대로 View가 있어 죄송합니다……), 이번 기사에서는 상당히 깨끗이 하고 있습니다.

「스타일도 프로그래밍 언어처럼 쓰면 좋지만…

그럼 멋진 Sass 라이프를