More than 3 years have passed since last update.

Sassの導入難易度を下げるツール達

Last updated at 2020-05-23Posted at 2020-05-23

Sassとは

「Syntactically Awesome StyleSheet」の略で、CSSを効率的に記述できるように設計・開発されたRuby製のCSSメタ言語のこと
Sass公式

Sassに限らずですが、CUIでターミナルを開いてコマンドを打つのは初心者には結構大変です。
今回はそんなSassを簡単に使えるツールを紹介します。

Sassを「Process File」というボタンをクリックするだけで、CSSファイルを生成してくれる、初心者にとってはとても嬉しい機能がついたテキストエディタ。 29ドルの課金をしないと広告が出てきますが、とりあえずは使ってみると良いでしょう。

画面左側にSassのコードを入力するだけで、右側にCSSのコードを書き出してくれるWebサービス。アクセスしてすぐ使えるので、SassのコードをCSSだとどうなるか試したい時に役立ちます。

CodepenではSassを使えますが、そのSassのコードをCSSコードで見たい時に、「View Compiled CSS」というボタンをクリックするだけで、CSS表示してくれます。 Codepenはスニペットとしても使えるので、これを使わない手はないでしょう。

今回紹介した以外にも、テキストエディタによっては拡張機能でSassを自動コンパイルしてくれるものも
あるので、調べてみても良いでしょう。
フロントエンドやWeb制作者を目指す人はSassを使える事は必須のスキルだったりするので、
最初はこうしたツールを使いながら少しづつ慣れていきましょう！