More than 5 years have passed since last update.

【Nuxt.js】Sassの導入方法

Posted at 2020-07-17

🎈 この記事はWP専用です
https://wp.me/pc9NHC-sc

前置き

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

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

Syntactically Awesome Stylesheets

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

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

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

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

style lang はsass

index.vue

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

   p 
     color: pink
</style>

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

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

style lang はscss

index.vue

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

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

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

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-sc