ValentinによるPixabayからの画像

はじめに

SassはCSSをより効率的に書くためのツールです。

Sassを使うと、入れ子にして書いたり、定義したスタイルを使いわ増したり、ループ、条件分岐などより柔軟にスタイルと定義できます。

Sassの２通りの書き方（SCSS、SASS）

SassにはSCSS、SASSの２通りの書き方があります。

違いはざっくり以下の通りです。

■SCSS

・拡張式は「.scss」
・入れ子の表現に「{}」を使う

【SCSSの例】

header{
  height: 100px;
  .title{
    font-weight: 24px;
  }
  .subtitle{
    font-weight: 16px;
  }
}

■SASS

・拡張子は「.sass」
・入れ子の表現にインデントを使う

【SASSの例】

header
  height: 100px;
  .title
    font-weight: 24px;
  .subtitle
    font-weight: 16px;

　

そんなに違いを感じないこの２つのですが、よりCSSの書き方に近いSCSSを使うのが一般的なので、

この記事ではSCSSについてまとめています。

Sassの導入

エディタに「Visual Studio Code」を使っている場合には簡単に導入できます。

以下の３つの手順で導入できます。

手順１．Visual Studio Codeに「Live Sass Compiler」をインストールする

　

手順２．.scssの拡張子でファイルを作成する
　　　　※.cssファイルを作成する場所と同じ場所に.scssを作成します。

　

手順３．Visual Studio Codeを開き、「Watch Sass」をクリックします

「Watch Sass」をクリックし「Watching…」になったら、動いています。

　

これで、準備完了です！

あとは、

.sassファイルにSassを書き込んで保存すると、自動で.cssファイルが生成されるので、

.cssファイルをhtmlファイルで読み込んでください。

Sassの使い方の基本

Sassの基本として、以下をご紹介します。

・コメントを書く
・入れ子にする
・変数を使う
・文字列の連結
・変数展開
・配列、連想配列を定義する
・演算

コメントを書く

■１行コメント

//これはコメントです

■複数行のコメント

/*
  複数行のコメント
*/

入れ子にする

header{
  height: 100px;
  .title{
    font-weight: 24px;
  }
  &:hover{  //⇐ header:hover の指定
    background-color: white;
  }
}

※入れ子の中で「&」を使うと親セレクタを指定できます。

変数を使う

■定義

$変数名: 値;
　例）$bgColor: #00f;

※変数名はロワーキャメルを使うのが一般的です。

■呼び出し

呼び出しは「$変数名」で呼び出せます。

例）body{
      background-color: $bgColor;
    }

文字列の連結

$変数名 + "文字列";

変数展開

"#{$変数名}文字列";

配列（＝リスト）

■定義

$配列名: 値1, 値2;
  例）fontSize: 10px, 12px, 16px;

■要素の取得

list.nth($配列名, インデックス番号);
  例）list.nth($fontSize, 2);        //12px

連想配列（＝マップ）

■定義

$連想配列名: (キー1: 値1, キー2: 値2);
  例）$fontWeights: ("regular": 400, "medium": 500, "bold": 700);

■要素の取得

map.get(連想配列名, キー);
  例）map.get($fontWeights, "medium");      //500

演算（＋、ー、*、/）

演算子	内容	例
+	足し算	18 + 6
–	引き算	18 – 6
*	掛け算	10 * 2
/	割り算	10 / 2
%	余り	12 % 2