LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-23

Sassとは

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

Sassの問題点

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

SassをGUIに使えるツール

Prepros

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

SassMeister

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

Codepen

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

まとめ

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0