2019-12-20

VSCodeでSassが簡単に使えてワクワクな件

突然ですが皆さんはエディター、何を使っていますか?

私はもちろんVisualStudioCode。ちょっと前までDreamweaverでしたが、動作の軽快さやらアプリ開発をするやらで完全にVSCodeに移行しました。

Sassの存在を知りつつも目の前の仕事に追われて手が出せておりませんでした。そんな中、12月後半に入りちょっと時間が空いたのでVSCodeにSassをインストールして使ってみると意外にサクサクッと環境が整いすぐに使い始められました。

Sassとは?

CSSの進化版、CSSプリプロセッサ―(CSSメタ言語)のこと。CSSではできないネストや変数、関数などが使えるためよりサクサク開発ができるようになり、WEBサイトの保守性も上がる良いことしかない。

今、どうしてもっと早くSassをやらなかったのだろうと非常に反省しているところです。

Extensionsで追加するだけ!

VSCodeの場合、ExtensionsからインストールするだけでSass環境が整ってしまいます。

Sass
Sassのインストール画面
LiveSassCompiler
LiveSassCompilerのインストール画面

ExtensionsからSassを検索し、SassLiveSassCompilerの2つをインストールするだけ!

LiveSassCompilerをインストールすることでSassをリアルタイムにCSSに変換してくれます。

ガンガンSass使っていきます

gulpなんかのタスクランナーを使ってやる方法もありますが、取り急ぎSassを触ってみたかったのでこの方法にしました。

ちょっと触ってみただけでまだ案件で使っていないですが、早く使いたくてウズウズしております。

特に変数の部分が魅力的で、色の管理やサイズの管理を変数にしまえるのはとてもありがたいです。

今までいちいちカラーコードをコピペして使ったり、フォントサイズやら要素の横幅なんか後から変更する時は検索して一つ一つ変更していったりと手間が掛かっていました。それが一か所変えるだけで良いなんて、HAPPYになること間違いないですよね。

以上、Sassについてのワクワクが止まらないので記事にしました!