Webデザイン実践Ⅱ<情報設計>｜8.メタ言語

メタ言語と入力支援

CSSメタ言語

cssを素早く書くために活用したいのがSassと呼ばれるcssメタ言語です。

SassとSASSとSCSS

Sass（サス、あるいはサース）はメタ言語の種類です。Sassの中には、SASS（エス・エーエスエス）記法とSCSS（エス・シーエスエス）記法があります。

このうち初心者の方が扱いやすく、シェアも大きいのは、SCSSのほうです。

SCSSを使った記述

はじめに：環境設定

Sass（SASS,SCSS）をCSSに変換するには「コンパイル」という作業が必要になります。VS Codeの場合、プラグイン『Live Sass Compiler』を使用します。

.scssファイルの作成

新規でファイルを作成し、拡張子を.scssにします。

コンパイルを実行するために必要な『コンパイルの監視』

Live Sass Compilerのインストール後にVSCodeの画面下部に追加される【Watch Sass】というボタンをクリックします。

「Watching..」の状態でSCSSファイル(.scss)を作成したり内容を変更すると、都度コンパイルが実行される様になります。

cssファイルの作成位置をcssフォルダへ変更する

このコードをLive Sass Compilerのsetting.jsonに記述してください。

特に、"liveSassCompile.settings.formats": [以下が重要です。


	{
		"workbench.colorTheme": "Default Light+",
		"editor.unicodeHighlight.nonBasicASCII": false,
		"security.workspace.trust.untrustedFiles": "open",
		"window.openFilesInNewWindow": "on",
		"figma.autocompleteBlocks": true,
		"window.zoomLevel": 1,
		"php.validate.executablePath": "",
		"json.schemaDownload.enable": false,
		"livePreview.notifyOnOpenLooseFile": false,
		"liveSassCompile.settings.forceBaseDirectory": "",
		"liveSassCompile.settings.autoprefix": [
		
		],
	
		"liveSassCompile.settings.formats": [
		{
			"format": "expanded",
			"extensionName": ".css",
			"savePath": "/css"
		}
	]
	}

SCSSの書き方

活用したいポイントはいくつかあります。主なトピックスは以下

  1. 入れ子
  2. 変数
  3. mixinとinclude
  4. 制御構文（@if、@for、@while、@each）

ここでは、主に3＋1（コメントの書き方）を紹介します。

入れ子（ネスト）

子孫要素へのcssについて、入れ子で表現することができます。慣れるとコレが非常にラク

	header{
	color:#000;
	p{color:#fc0;}
	}

上記をコンパイルしてみましょう。

＆の使用

ホバーや擬似要素before、afterなどを使用したい場合、SCSSでは&（アンパサンド）を使用します。

a{
  text-decoration: none;
  &:hover{
    text-decoration: underline;
  }
}

上記をコンパイルしてみましょう。

また、複数のクラス名を繋げて記述することで適用範囲を絞り込みたい場合なども「&」が使用できます。

変数

SCSSでは変数が使えます。（変数とは値や文字列など情報を格納できる箱のようなものです）。まずは色（メインカラーやサブカラーなど）を変数にしておくのがおすすめです。

イメージとしてはIllustratorのグローバルスウォッチのような感じ。

SCSSの場合ハイフンとアンダースコアは同一と見なされるので、上の場合でも同一変数と認識されてコンパイルされます。

書き方①

はじめに変数を定義します

	// 変数1
	$base-color: #000;
	// 変数2
	$sub-color: #ff0;

書き方②

次にコードの中で変数を書きます

	h1 {
		color: $base-color;
	}
	h2 {
		color: $sub-color;
	}

こうすることで、何度も出てくるカラーコードなどを短縮することができます。慣れてきたらいろいろな要素を変数に格納していきましょう。

SCSSでのコメント

//スラッシュ2つでSCSSだけのコメントができます。

	.class {
	// SCSSのコメント →コンパイルされない
	margin: 0 auto;
	/* CSSでも使うコメント  →コンパイルされる */
	padding: 0 20px;
}

メディアクエリの入れ子

一部だけをスマホ（あるいはPC対応）に対応する、といった場合はSCSSでのメディアクエリが便利です。

.box{
  /* スタイル記述 */
width:500px;
background:pink;
  @media screen and (max-width: 500px) {
    /* スタイル記述 */
width:100%;
background:orange;
  }
}

他のscssの読み込み

別のscssファイルを作成して読み込ませることができます。

たとえば、reset.scssとparts.scssを作成して、style.scssに次のコードを記述します。 
	@use 'reset';
	@use 'parts';

大規模なサイトでは「parts」部分をさらに細くコンポーネント単位（Header,globalNavigation,Footer）に分けたりしています。

繰り返し

@forによる繰り返し文を使うこともできます。特に次のコードは便利なのでコピペしてみてください。

	@for $value from 1 through 7 {
		.mt_#{$value * 10} {
		  margin-top: 10px * $value;
		}
	  }

新しいCSS

上記はSCSS（Sass記法）の特徴ですが、最新のCSSではこれらについてのサポートがなされており、「SCSSを使わなくてもいいのでは？🙄🤔」という意見もあります。

ところが、新しく登場した技術がすべてのブラウザに対応しているわけではない、という前提が必要になります。勉強としては最新技術のキャッチアップはオススメですが、現場レベルの感触としては、成熟してきたら利用する、といった具合がおすすめです。CSSの対応状況を調べるためのサイト

CSS変数（カスタムプロパティ）

--変数名で定義し、var()で呼び出します。サイト全体で共通する色や余白を一括管理するのに非常に便利です。

:root {
  --main-gutter: 30px;
}
.box {
  width: 300px;
  height: 100px;
  margin: var(--main-gutter);
}

CSSでのネスト（入れ子）

最新の標準CSSでは、Sassのようにセレクタを入れ子にして記述できるようになりました。親要素との関係性が明確になり、コードの可読性が向上します。

.item {
  background: #fff;
  /* 親要素の中に入れ子で記述 */
  .title {
    color: #0bd;
    font-size: 2rem;
  }
  /* &を使うことで疑似クラスなどを繋げられる */
  &:hover {
    box-shadow: 0 0 1rem #999;
  }
  &:first-of-type {
    margin-top: 3rem;
  }
}

CSSでの演算子（calc関数）

calc()関数を使うことで、異なる単位（%とpxなど）を組み合わせた計算が可能です。レスポンシブデザインのレイアウト調整に便利です。 

.item {
  /* 3カラムから余白分を引く計算例 */
  width: calc(100% / 3 - 60px);
  margin: 10px;
}

SCSSでcalc関数を併用する場合

Sassの中でcalc()を使う際、Sassとしての計算結果を渡したい場合は「インターポレーション（#{}）」を使用します。これにより、計算をどこで実行するかを制御できます。

SCSSでの記述:

.sample {
    width: calc((100px - 20px) / 2);     /* ブラウザ側で計算させる */
    width: calc(#{(100px - 20px)} / 2);  /* 括弧内のみSassで計算し、除算はブラウザに任せる */
    width: calc(#{(100px - 20px) / 2});  /* すべてSassで計算してからCSSに渡す */
}

コンパイル後のCSS:

.sample {
    width: calc((100px - 20px) / 2); /* そのまま出力 */
    width: calc(80px / 2);           /* インターポレーション部分のみ計算済み */
    width: calc(40px);               /* すべて計算済み */
}