Sass環境の構築

ちょっと分かってきた。

理解する

Sassはcssをいい感じに記述することができる。変数とかforとか使えるから大規模な構築とかでめっちゃ楽になる。やれることがいっぱいあって嬉しいね、ってやつ。

SassにはSASSとSCSSがあって、SCSSが主流らしい。雑にいえば書き方に違いがあってSCSSの方がCSSっぽくって楽ですねって感じ。

Sassのままだと使えないから、css形式に書き出し(コンパイル)する必要がある。

使わなくていいならそれでいい

小規模開発だったらSassを使わなくても賄いきれるんで、流行りだからって飛びつかなくても困らないっちゃ困らない。変数が使いたいだけならCSSでも使えるし。

CSSで変数(カスタムプロパティ)を使ってみよう
プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました!今回はCSS変数

このことだけを記事にしてる人もいる。

ページが見つかりませんでした / いがわ
デザインのポートフォリオです。= シンプルかつキャッチーに。

ただ、知識として持っておけば、Sassで書いてる記事も多いので読み解けたほうが便利だよねみたいな。

環境はVSCodeで。

VSCodeの使い勝手の良さはすごいと思う。後発だし無料だし、それでこのパフォーマンスですかって、すごい。拡張機能でいい感じになる。

この記事を読んだら環境が作れる。

VSCodeでSASS・SCSSをコンパイルする方法【初心者向き】
人気のテキストエディターVisual Studio Codeで【SASS・SCSS】をコンパイルする方法を解説します。プラグイン『Live Sass Compiler』を使った簡単に出来る方法です。Web制作・プログラミング初心者はぜひご覧...

ワンクリックで書き出せるのは強い。

編集はSassでって決めてしまうならcssは圧縮しちゃっても問題ないわけで、それも拡張機能でやれる。

VSCodeでJavaScript,CSSを圧縮・軽量化(Minify)する
Microsoftが無償で配布しているエディタのVSCode(Visual Studio Code)はとても便利です。 今回、VSCodeを利用してJavaScript、CSSを圧縮・軽量化(Minify)する方法を解説します。 Minif

これらを使ってみたら分かるけど、編集ファイルは.scss1つに対して追加で書き出されるファイルが3つある。見間違えたらめんどくなるので注意。

Sassの使い方

「チートシート」で調べたら要点をまとめた記事がいっぱい出てくるのでオススメ。

【Sass】SCSS記法チートシート
SCSSの書き方のチートシートを作成しました。SassはCSSを効率的に書けるようにしたメタ言語で、SASS記法とSCSS記法があります。このページではSCSS記法の書き方をまとめています。

あとは外部ファイルの扱いを知っておけば。

SCSS(SASS)の@importが廃止!?後継機能@useの使い方と注意点を説明
SCSS(SASS)ファイルの読み込みに使う@useの、これまで使っていた@importとの違いや注意点、使用する際のコツを解説します!SCSSではブロック毎にファイル別でスタイル管理をするのがお勧めなので、@useを上手く使って快適なSC...

まとめ的なもの

以前いじったときはコマンドプロンプトでコンパイルしてたんで非常にだるかった。エディタ上で完結できるならまだ実用性あるかなって思った。でも、やっぱり、一定以上の規模でないと手持ち無沙汰感があるし、大規模でも別にcssで良くないかとも思う。

選択肢として持てることが大事で、Sassでやるべきとは感じてない。

コメント

タイトルとURLをコピーしました