Web開発

【Sass】Web制作を効率化する最強の技術を紹介します

更新日:

こんにちは、ケースケ(@keisuke555_eng)です!

2020年に、約8年間勤務したソフトウェア開発会社を退職し、フリーランスエンジニアとして活動しています。

今回は、フロント周りのエンジニアさんなら誰もが使っているであろう技術「Sass」について紹介します。

正直、コレが使えるのと使えないのとで、フロントコーディングのスピードが格段に上がります!

初耳だよって方はこの機会に試してみてください。

それではさっそく説明していきます!

Sassって何?

学問的な説明はこの記事の本題ではないのでざっくりと説明すると、Sassというのは、CSSコーディングをめちゃくちゃ効率アップしてくれる夢のような言語です!

Sassの記述ルールに従ってスタイルをコーディングすると、内容がコンパイル(コンピュータに解釈)されて最終形のCSSファイルが自動生成されるというものになります。

近年のWeb制作現場だと、コーディングはSassで行って、生成されたCSSファイルを納品(サーバーにアップ)なんて形態が多いのではないでしょうか?

つまり「現場で必要とされる技術」なわけです!

Sassの導入方法

導入の手順をご紹介するにあたり、前提となる環境を記載しておきます。

  • PC:Macbook Pro 13インチ
  • エディタ:Visual Studio Code

Sass導入の手順はいたってシンプル!

  1. VSCodeのインストール
  2. VSCodeを起動
  3. プラグインをインストール

以上です。順番にご説明しますね。

①VSCodeのインストール

まずはMac用のVSCodeをダウンロード&インストールします。

画面右の「Mac」をクリック

Microsoft社のVisual Studio Codeダウンロードページからインストーラをダウンロードし、インストールしてください。

②VSCodeを起動

インストールが完了したら、VSCodeを起動します。

すると下のような画面になると思うので、左のツールバーからEXTENSIONS(四角形が4つのアイコン)ウインドウをクリックします。

VSCodeの初期画面

③プラグインをインストール

EXTENSIONSウインドウで、検索バーに「sass live」まで入力すれば、「Live Sass Compiler」というプラグインが表示されると思うので、installをクリックします。

画面左の上から3番目に「Live Sass Compiler」が表示されています

補足:ついでにLive Serverもインストールしておこう

「Live Server」というツールもかなり便利なのでインストールしておきましょう。

画面左、Live Sass Compilerのすぐ下に「Live Server」があります

詳しい説明は省略しますが、Web制作をしていて、CSSのコードを追加→ブラウザをリロードして表示を確認の作業って、何回も繰り返してるとめっちゃ疲れますよね。

Live Serverを使用すれば、コード変更時に自動でブラウザ表示がリロード(更新)されるので、手を動かす回数を減らすことができます。

Sassの使用例

導入が完了したSassの使用例をちょっとご紹介します。

下の画面は、僕が実際に記述したCSSコードです。

右の記述では何回も「.banner .content」と書いてますよね?

左がSassを使用して書いたもの、右が純粋なCSSで同じ内容を書いたものになります。

両者の違いが分かりますか?

ざっくり説明すると、冗長なコードはSassでは階層的に記述できるので、何度も同じ文字列を入力しなくて済みます

あと、変数とかも使えるので、色の指定なんかを切り出しておけば、サイトのメインカラーを変えたい時に変更箇所が1箇所で済みます

つまり、修正や変更の手間が大きく削減できるわけです!

まとめ

エンジニアにとって作業をいかに効率化するかは永遠のテーマです。

今回お伝えしたいことはたった1つ。

Sassまじで便利すぎる!絶対使ってみるべき!

Sassのような技術をどんどんキャッチアップしてコーディング作業をどんどん効率化し、生産性を上げていきましょう!

それでは、また。

-Web開発
-, , ,

Copyright© みちのくBASE , 2021 All Rights Reserved