文法

【Nuxt.js】Sassの導入方法

前置き

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

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


Sassとは

Syntactically Awesome Stylesheets

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

2種類の記法

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

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

SASS記法

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

style lang はsass

SCSS記法

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

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

style lang はscss


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

Sassを使わない場合

) pages

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


変数を使ってみよう

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

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

directory

assets/
--| scss/
-----| _color.scss

pages/
--| index.vue

nuxt.config.js

コード

) assets

) file

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

) pages


mixinと一緒に使える

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

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

mixinについてはこちら


まとめ

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

-文法
-,

© 2020 aLiz Nuxt