チャプター３では、Sassで使用される変数と演算について解説します。
「CSSを効率的に書く！Sassの入門講座」の第３章です。この講座については以下から確認できます。
変数の基本
変数は、指定した値を名前を付けて保存することができ、あとでこの値を使用することができます。
変数は、複数のスタイルシートで同じ値を使用する場合に、スタイルシートの管理を簡略化するために使用することができます。
例えば、以下のように書くことで、$primary-colorという変数を定義することができます。
$primary-color: #ff0000; 変数を定義するときには、$を使用し、変数名と値をコロンで区切って記述します。変数名は、英数字やアンダースコアを使用することができます。変数を使用するときには、変数名を#{}で囲みます。
例えば、以下のように書くことで、$primary-colorを使用することができます
.text {
color: #{$primary-color};
}変数を使用することで、複数の箇所で同じ値を使いたい場合に便利です。
変数を使用することで、スタイルシートをより管理しやすくすることができます。
算術演算の基本
Sass では、算術演算子を使用することができます。これらの演算子を使用することで、CSS の値を計算することができます。
算術演算子は以下のようになります。
| 演算種類 | 演算記号 | サンプル |
|---|---|---|
| 足し算 | + | $width: 100px + 50px; |
| 引き算 | – | $width: 150px – 50px; |
| 乗算 | * | $area: 10px * 20px; |
| 除算 ※ | math.div($n1, $n2) | math.div(100, 5) |
| 剰余 | % | height: $ 100px % 3; |
※最新の Sass ではスラッシュ（/）を使った除算（割り算）は非推奨（将来的には廃止）になりました。そのため、除算は数学関数のmath.div() を使用することが推奨されています。数学関数については、６章で詳しく解説しています。
数学関数に関してさらに詳しく知りたいという方は「Scss 数学関数のまとめ：四捨五入、切り上げ、切り捨て、絶対値、最大値、最小値、乱数」で詳しく解説していますのであわせて確認してみましょう。
やってみよう！CSSの記述をSCSSの記述に変換してみよう！
2章と3章で学んだ内容をもとに、実際にCSSをSCSSに変換してみましょう。
ダウンロードした教材のchapter03フォルダを開いて、questionフォルダ内の「index.html」と「style.css」を開きます。
「style.css」を右クリックからリネームし、「style.scss」に変更します。そして、style.scssの中身を、1つのネストの中に全てを含めた形に修正し、各色を変数に格納して適用してみましょう。
問題 「style.css」をSCSSでネストと変数を使った形式に書き換える
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter03-Answer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body>
<div class="parent">
<p>ここに#ff0000が適用される</p>
<div class="child">
<p>ここに#00ff00が適用される</p>
<div class="grandchild">ここに#0000ffが適用される</div>
</div>
</div>
</body>
</body>
</html>.parent {
color: #ff0000;
}
.parent .child {
color: #00ff00;
}
.parent .child .grandchild {
color: #0000ff;
}解答は、questionと同じ階層のanswerフォルダに入っています。わからない場合は、answerを参照しながら、以下の問題の解説を確認してみてください。
解答ははここをクリック！
以下が、解答のサンプルです。
※以下はあくまで一例です。ネストや、変数に色を格納する方法については、この限りではありません。
$primary-color: #ff0000;
$secondary-color: #00ff00;
$tertiary-color: #0000ff;
.parent {
color: $primary-color;
& .child {
color: $secondary-color;
& .grandchild {
color: $tertiary-color;
}
}
}まず、変数を3つ定義しています。
$primary-color: #ff0000;
$secondary-color: #00ff00;
$tertiary-color: #0000ff;ここで定義された変数は、後でスタイルに使用するために保存されます。
次に、セレクタをネストして、スタイルを定義しています。
.parent {
color: $primary-color;
& .child {
color: $secondary-color;
& .grandchild {
color: $tertiary-color;
}
}
}このように書くと、.parentセレクタ内の.childセレクタ、そして.childセレクタ内の.grandchildセレクタに、それぞれ$primary-color、$secondary-color、$tertiary-colorというカラーが適用されます。
変数を使っているため、後でカラーを修正する場合にも、変数を書き換えるだけで、スタイル全体で使われるカラーを一括修正することができます。
!defaultと!globalについて
変数に!defaultや!globalを付けることで、特別な意味を持たせることができます。
!defaultで変数の上書きを禁止する
!defaultを付けた変数は、既に値が割り当てられている場合はその値を使用し、それ以外の場合は!defaultを付けた変数の値を使用します。
以下のサンプルでは、$primary-colorが既に値が割り当てられている場合は、その値を使用します。それ以外の場合は、$primary-colorに#ff0000が割り当てられます。
$primary-color: #ff0000 !default;!globalでどのスコープからも参照できるようにする
!globalを付けた変数は、どのスコープでも参照できるようになります。
以下のサンプルでは、$font-stackがどのスコープでも参照できるようになります。
body {
font-family: $font-stack;
}
$font-stack: Helvetica, sans-serif !global;リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
チャプター３ 「変数と演算の基本」のまとめ
チャプター３では、Sassで使用される変数と算術演算について学びました。
- 変数は、値を格納するためのもの。
$を使用して、変数を定義することができ、複数箇所で使用される値を一元管理することが可能。- Sassでは、算術演算を行うことが可能。
!defaultを使用することで、変数がすでに定義されている場合は、値を上書きしないようにすることができます。!globalを使用することで、ローカルスコープで定義された変数をグローバルスコープにできます。
これらの技術を理解することで、Sassを使用した効率的で柔軟なコーディングが可能になります。
チャプター
次章では、Sassの基本の「配列とマップの基本を理解する」学びます。
コメント