【Nuxt.js】Sassの導入方法

前置き

Sassを使えば
スタイリングを入れ子にして書けたり、
スタイリングの値を変数したり、
管理が便利で見やすくなります🌟

そもそもSassとは何か、
そして導入方法や使用例をご紹介🎀

Sassとは

Syntactically Awesome Stylesheets

構文的に素晴らしいスタイルシート！
前置きの通り、
スタイリングの管理が便利になるものです🌟

2種類の記法

この2つの書き方があります。
SASS記法
SCSS記法

SassとSASSが非常に紛らわしいですね😂
Sassは言語で、SASSが記法です✍️

SASS記法

セレクタやクラス名の {} や
値の後ろの ; を書かない書き方

style lang はsass

<style lang="sass" scoped>
  div
    padding: 20px

    p 
      color: pink
</style>

div

padding: 20px

color: pink

</style>

SCSS記法

入れ子(ネスト)した書き方🌸
こちらの方が入れ子になっている感じが
パッと見て分かりやすいです✨👀
このブログではSCSS記法がメインです！

templateの構造と照らし合わせて
どこにどんなスタイルがあるのか
確認しやすいんです…✨

style lang はscss

<style lang="scss" scoped>
  div {
    padding: 20px;

    > p {
      color: pink;
    }
  }
</style>

div {

padding: 20px;

> p {

color: pink;

}

</style>

install

それでは早速インストールしてみましょう✨😄

@nuxtjs/style-resources
こちらは変数を使いたい場合や
mixinと合わせて使いたい時に必要です！

terminal

$ npm install --save-dev node-sass
$ npm install --save-dev sass-loader
$ npm install --save-dev @nuxtjs/style-resources

参考
https://ja.nuxtjs.org/faq/pre-processors/
https://github.com/nuxt-community/style-resources-module

入れ子にして書いてみよう

シンプルにテキストの色を変えるだけ🧞‍♂️

クラスで記載しています。
pageの中の textの中の light-text
構造が分かりやすいですね🎶

コード

Sassを使う場合

) pages

<template>
  <div class="page">
    <p class="text">Hello <span class="light-text">Nuxt.js!</span></p>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    padding: 20px;

    > .text {
      color: blue;

      > .light-text {
        color: lightblue;
      }
    }
  }
</style>

<p class="text">Hello <span class="light-text">Nuxt.js!</span></p>

</div>

</template>

export default {

}

</script>

.page {

padding: 20px;

> .text {

color: blue;

> .light-text {

color: lightblue;

}

</style>

Sassを使わない場合

) pages

今は要素が少ないので見れば分かりますが、
増えていくとクラス名の全てを
目で追うのが大変ですね💦

<template>
  <div class="page">
    <p class="text">Hello <span class="light-text">Nuxt.js!</span></p>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="css" scoped>
  .page {
    padding: 20px;
  }

  .text {
    color: blue;
  }

  .light-text {
    color: lightblue;
  }
</style>

<p class="text">Hello <span class="light-text">Nuxt.js!</span></p>

</div>

</template>

export default {

}

</script>

.page {

padding: 20px;

}

.text {

color: blue;

}

.light-text {

color: lightblue;

}

</style>

変数を使ってみよう

先ほどと同じです❣️
シンプルにテキストの色を変えるだけ🧞‍♂️

変数用のファイルを作って使いまわします。
グローバルに使用したいので
nuxt.config.jsにscssファイルを記載します✍️

コード

) assets

$color-font-main: blue;
$color-font-sub: lightblue;

1 2	$color-font-main: blue; $color-font-sub: lightblue;

) file

styleResourcesの値には
対象となるSassファイルを指定します📌
拡張子の種類別に分けて
書く必要があるので注意しましょう💡

export default {
  styleResources: {
    scss: [
      '~/assets/scss/_color.scss'
    ]
  },
  modules: [
    '@nuxtjs/style-resources',
  ],
}

export default {

styleResources: {

scss: [

'~/assets/scss/_color.scss'

]

modules: [

'@nuxtjs/style-resources',

}

) pages

<template>
  <div class="page">
    <p class="text">Hello <span class="light-text">Nuxt.js!</span></p>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    padding: 20px;

    > .text {
      color: $color-font-main;

      > .light-text {
        color: $color-font-sub;
      }
    }
  }
</style>

<p class="text">Hello <span class="light-text">Nuxt.js!</span></p>

</div>

</template>

export default {

}

</script>

.page {

padding: 20px;

> .text {

color: $color-font-main;

> .light-text {

color: $color-font-sub;

}

</style>

mixinと一緒に使える

こんな感じでメディアクエリを
mixin & Sass で簡単に管理できます🌟

こちらはまた別記事で紹介します🎀🙋‍♀️

$tab: 768px;
$lap: 1024px;
$pc: 1200px;

@mixin tab {
  @media screen and (min-width: ($tab)) {
    @content;
  }
}

$tab: 768px;

$lap: 1024px;

$pc: 1200px;

@mixin tab {

@media screen and (min-width: ($tab)) {

@content;

}

mixinについてはこちら

【Nuxt.js】Nuxt文法編：mixin

まとめ

Sassはスタイリングの管理が便利になるもの
テンプレートと同じ構造入れ子にして書ける
$変数: 値で変数を設定できる