素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日: 2019年6月12日
最終更新日:

【sass導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】

【最新機種】GoPro hero11 Black

created by Rinker
GoPro(ゴープロ)
¥62,000 (2024/03/15 19:06:06時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

created by Rinker
THE NORTH FACE(ザノースフェイス)
¥29,280 (2024/03/15 19:06:01時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です!

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

created by Rinker
スクウェア・エニックス(SQUARE ENIX)
¥3,250 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥13,861 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥7,180 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/03/15 19:06:03時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

スポンサーリンク

336×280




おさらい

前回までで、ローカルでのサーバー起動・動作確認まで行うことが出来ました。

今回は、プロジェクトへのsassの導入を進めていこうと思います。

Sassとは?

What’s?

導入をする前に簡単にですが、Sassについておさらいです。

Sassとは、Syntactically(構文が) Awesome(イカした) StyleSheet(スタイルシート)の略です。

なにそれかっこいい!


Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.Sass: Syntactically Awesome Style Sheets

具体的には、「SASS」記法と、「SCSS」記法の二種類が用意されています。
SCSSもSassなので混乱しないように気をつけましょう。

いずれも、構造化記述が可能なのでセレクターに対するスタイル指定の関係性がとても分かりやすくなります。

記述方法のサンプル

今回は以下のCSSをそれぞれの記法で書いてみようと思います。

より細かい記法についてはドキュメントを参照してください。

Sass Basics

Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first.Sass: Sass Basics

SASS記法

SASS記法は以下のようなRubyのような記述量の少ない書き方となっています。

インデントにより階層を表すので見やすいのも特徴ですね。

SCSS記法

SCSS記法通常のCSS記述に近く、そのまま使えるので互換性と可読性が高いのが特徴です。

手順

必要ライブラリのインストール

まずは、sassを利用するための必要ライブラリをインストールしていきましょう。

こんな感じで完了すると思います。

sassファイルの作成

では、実際にsassファイルを作成してみましょう。
今回は簡単な変数を定義して、その変数をページ側で参照するようにしてみます。

まずは、assets/sassディレクトリを追加し、その中にvariable.sassを作成しましょう。

こちらは、sassで利用する変数を定義するファイルとなります。

pagesのstyle修正

次に、pages/index.vueの中にあるstyleタグの中身を修正していきましょう。

lang=scss

ここでstyleタグにlang属性でscssと追加しました。

これは、vue-loaderプリプロセッサと呼ばれる機能で、「この中はscssによる記述なのでコンパイルが必要だよ!」と教えるための記載となるのでsassを使う場合は必須です。

vue-loader のおかげで、ただ lang 属性を使うだけで <template> や <script> あるいは <style> などのためのプリプロセッサを使うことができます。プリプロセッサ – Nuxt.js

こちらを指定しないと、コンパイルが走らないので変数展開がされずにCSSが適用されなくなってしまいます。

scoped

scopedについては、この指定がないとグローバルなcssとして反映されてしまいます。

基本的にpagesの中のテンプレート内で指定したcssは自分自身(pages)と参照しているコンポーネントに反映するのが理想ですが、scoped属性を指定しないと、親レイアウトにまで影響が出てしまいます。

試しに、layouts/default.vueの中と、pages/index.vueの中にそれぞれh1.scoped--sampleに該当する要素を作成し、以下のような指定をしてみます。

scoped有り

自動でdata-v-XXX属性に対するセレクタが追加されるので、親レイアウトには適用されないようにコンパイルされています。

scoped無し

クラスセレクタのみのCSSになっているのでグローバルに適用されてしまい、親レイアウトに影響が出てしまっています。

nuxt.config.jsの修正

次に、nuxt.config.jsに変更を加えていきます。

確認

では、準備が出来ましたので実際に起動してみましょう。

正常に変数が展開されて適用されていますね!

終わりに

以上のように、モジュールを追加するだけでsassの対応が出来てしまいました。

今時は生のcssを書くことはほとんどないと思いますし、sassなどのcssコンパイラーを使う方が格段にメリットがあるので、是非導入してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , ,

blogenist

Author: blogenist

関連記事

YouTubeも見てね♪

お名前.comサイドバー