Twitterでブログ更新情報を配信中

【SASS】実務で使うならSassがおすすめ!VSCodeではじめるSass入門

CSSのプロパティを覚えて、スタイル指定ができるようになってきたらSass(サス)に挑戦してみましょう。変数や継承によるスタイルの定義で、コーディングの手間が省けるため、生産性も上がりますよ!

例えば、複数箇所で同じスタイルを使う場合、クラス、IDで指定することが多いですよね。一部の設定を利用したいときなどは対策が必要です。該当セレクタごとに打消しのCSSを追加したり、新しいスタイルを用意したり。。これでは入り組んだスタイルシートになりますし、管理自体も難しくなってしまいます。

以上の問題を解決し、学習コストもかからないSassはとてもおすすめです!

Sassとは

Sassとは「Syntactically Awesome StyleSheet」の略で、構文的に素晴らしいスタイルシートと直訳できます。つまり、CSSのようにスタイルを指定できる上、読みやすく、メンテナンス性に優れた構造のスタイルシートだと言えます。

ただし、Sassは「CSSプリプロセッサ(メタ言語)」であり、変数や入れ子構造といったプログラミングに近い形で使われます。このため、CSSファイルに変換するコンパイル作業をしなければ指定したスタイルは適用されません。

また、記述方法も2種類に分かれています。 拡張子が.sassのものは、括弧やセミコロンを使わずにインデントや記号で表記していきます。.scssはCSSと同じ書き方ができ、セレクタを含む情報を括弧で囲むなどの入れ子にして指定します。

今回は後者である現在主流の「.scss」記法でファイルを作成してきます。

Sassを使うための準備

作業環境・ファイルを整える

使うエディタはVSCodeにしましょう。後々専用の拡張機能を使います。

VSCodeの公式サイト

インストールが完了したら、ワークスペースにフォルダを追加して、HTML、SCSSファイルを用意します。

VSCodeのワークスペースにデータを用意

こちらがHTMLファイルのコードです。SCSSファイルは何も書かなくて大丈夫です。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Sassの練習</title>
</head>

<body>

    <div>
       <h2>Sassとは</h2>
       <h2>Sassを使うための準備</h2>
   </div>  

</body>

</html> 

VSCodeの「Easy Sass」を使う

左下の管理から拡張機能を選びます。

VSCodeの拡張機能検索

Easy Sassと検索し、該当のツールが出てきたら緑色のInstallアイコンをクリックします。

EasySassを検索

インストール完了後、こちらのページはタブの×で閉じてください。

EasySass

Sassでスタイルを指定

それではスタイルを指定していきます。下記の要件で見出しを作成しましょう。

  • 見出しはh2。文字色は黒(#000)。フォントは游ゴシック。
  • 見出しの背景色は灰( #f5f5f5 )。上下左右10pxの余白。
  • 前に5pxの縦ボーダー。色は青( #00008b )。

入力完了後はCtrl+Sで保存してください。CSSファイルと圧縮されたCSSファイルが自動で保存されます。

scssでコーディング

Scssのコードはこちらです。一例なので、全て同じである必要はありません。

$font-color: #000; 
$font-family: Yu Gothic;

@mixin box{
 padding: 10px;
 margin-bottom: 10px;
 border-left: solid 5px #00008b;
 background-color: #f5f5f5;
}

div{
 h2{
   color: $font-color;
   font-family: $font-family;
   @include box;
 }
} 

ブラウザで確認すると、このようになります。

完成

Sassの便利機能

変数

例で指定した「$font-color」「$font-family」の2つが変数にあたります。頭文字に「$」をつけて任意の文字列で命名すると独自の変数となり、CSSプロパティの値として利用できます。

これにより、よく使う色やサイズを一括管理できるので、変数で指定したプロパティを一度に変更したいときにとても便利な機能です。

@mixinと@include

例のような「@mixin box」がスタイルを定義している部分です。何度も使いたいスタイルを指定して、変数と同じように呼び出すことができます。

指定するときは「@mixinを使い、呼び出すときは「@include」をそれぞれ使います。変数と異なり、セレクタ {プロパティ名:値;}という書き方はせず、スペースを挟んで定義した文字列を記載します。

@mixin、@includeと似た「@extendの方法もあります。冒頭でお話した、クラスやIDを新規で作ることなく一部を「継承し、適用したいCSSを追記する手法です。

@import

今回は一例に登場しませんでしたが、他のSassファイルを読み込むときに使う記述になります。「@import」は、CSSと同じようにSassでも使うことができます。

内容に応じてCSSを分割し、必要なスタイルシート間で共有できれば、エラーが見つけやすくなり、メンテナンスしやすいメリットがあります。Sass自体管理しやすいスタイルシートとして普及しているので、合わせて使うことをおすすめします。

Sassをコンパイルできるツール

Koala

Koala」は、事前に「Ruby」のインストールが必要になります(Macは不要)。今回のEasy Sassのように自動でコンパイルしてくれるフリーの「GUIコンパイラ」です。コマンドラインからの操作ではないので、初心者にも使いやすいソフト。

Koalaの公式サイト

Prepros

Prepros」は、同じくフリーで使えるGUIコンパイラです。$29とありますが無料で使えます。コンパイル方法は「Koala」と大きく変わらず、ドラッグ&ドロップでOK。ライブプレビュー機能もあるので「VSCode」の代用にもおすすめですよ。

Preprosの公式サイト

Sass Meister

Sass Meister」は、「Koala」や「Prepros」と異なるオンラインツールです。左のボックスにSassのコードを入力すると、右のボックスにCSSで出力されます。Viewのボタンで画面を縦横に分割できるほか、HTML用のボックスでプレビューも可能です。

Sass Meisterの公式サイト

今回はVSCodeを利用したSassの使い方について学びました。既にHTML、CSSを理解している方は、Sass独自のルールを覚えるだけでOK。

最初は機能を調べながらのコーディングになるので、少し時間がかかるかもしれません。こちらの本を持っているとショートカットできますよ。

慣れてくると使い回せるスタイルを自分で作成できるので、サイトを作れば作るほどストックが増えていきます。よく使うスタイルとしてまとめておけば、さらに時間短縮に。

「Sass」と相性のいい「BEM」の書き方を組み合わせると、メンテナンスしやすいコードになります。こちらもおすすめです。

【HTML+CSS】BEMの命名規則でメンテナンス性の高いコードを書く