こんにちは!ケインコスゲ(@keinkosuge)です!
今週1週間に渡って、SCSS(dart-sass)に関する基本的な使い方、大切なポイントを抜粋してブログでまとめてみました!
今回は、総集編ということで、それぞれの記事をどういった意図で記載して、それぞれ誰に向けたものとして書かせていただいたのかを、まとめてみたいと思います!
- そもそもSCSSを初めて触る
- 今までnode-sassを使ったSCSSを書いていて、dart-sassへの移行を検討している
など、様々な方がSCSS(dart-sass)について調べていると思うので、参考になれば幸いです!
目次
SCSSとはそもそも何なのかについてまとめた「SCSSって何??基本中の基本をまとめてみた」
まずはSCSSって何??基本中の基本をまとめてみた【Arrown SCSS Week】についてです!
こちらの記事は「SCSSをそもそもこれから勉強し始める」という方に向けた記事になります!
SCSSとはそもそも何なのかというところから書かせていただいたので、SCSSビギナーの方はぜひご覧になってみてください!
SCSSの環境設定でつまづいている・手っ取り早く始めたいという方へ「Visual Studio Codeのプラグイン「DartJS Sass Compiler and Sass Watcher」の使い方を紹介
次に紹介するのはVisual Studio Codeのプラグイン「DartJS Sass Compiler and Sass Watcher」を使ってSCSS(dart-sass)環境を簡単に作ってみよう! です!
SCSS(dart-scss)はCSSにトランスパイル(変換)する必要があるのですが、環境設定の方法によっては、つまづいて先に進めない・・・ということも出てくるかもしれません。
そんな方にお送りしたいのが、Visual Studio Codeのプラグイン「DartJS Sass Compiler and Sass Watcher」を使ってSCSS(dart-sass)環境を簡単に作ってみよう!で紹介したVisual Studio Codeのプラグイン「DartJS Sass Compiler and Sass Watcher」です!
これがあれば簡単にSCSS(dart-sass)の環境設定ができるようになっているので、とりあえずまずは手を動かしたい!SCSSを試したい!環境設定つまづいた!という方は、ぜひ試してみてください!
SCSSの基本的な文法についてまとめた記事たち
さて次は、SCSSの基本的な文法についてまとめた記事たちです!
言ってしまうと先ほどまで紹介した2記事以外に書いた4記事全てが当てはまるのですが、
- 変数
- mixin
- @useと@forwardを使ったファイル分割
- ネストとアンバサダ
はぜひ知っておきたい4大文法になるのではないかと思います!
特にSCSS(dart-sass)で知っておきたい@useと@forwardの基本的な使い方。とSCSS(dart-sass)を使ったフォルダ・ファイル構成のポイントについて、事例と共に考えてみるの2記事で紹介している内容については
- SCSSビギナー
- SCSSは使っていて、node-sassなどからの移行を検討している
という方どちらにも当てはまると思いますし、SCSSを使用する価値が一番ある部分だと思いますので、ぜひ参考にしていただければと思います!
それからもう1つ知っておいていただきたいのが、「上述した4記事で紹介したもの以外にもSCSSの文法はたくさんある」ということです!
僕も正直全部覚えているわけではないのですが、@ifとか@eachとか、あるいはインターポレーションとか、書いておいた方がいいかなと悩んだものはたくさんありました。
ですが、今回のSCSSシリーズは「1週間という期間で優先順位の高いものを紹介している」というポリシーでブログを描こうと思っていたので、@ifとか@eachとか、あるいはインターポレーションなどは、今回は触れないことにしました。
気になる方はSassの公式ドキュメントを参照いただければと思います!
まとめ
ということで、1週間に渡ってお送りしてきたSCSS(dart-sass)の連続シリーズブログについて、改めて今回のブログでまとめてみました!
各記事の内容については、また色々発見したことがあればブラッシュアップしていきたいと思います!