Web制作者のためのSassの教科書における勉強記録【変数・演算】

購入したWeb制作者のためのSassの教科書。

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ【電子書籍】[ 平澤 隆 ] 価格：2376円 (2021/4/18時点) 楽天で購入

こちらのテキストに沿ってSassの記述方法の例文を記録していきまっせ～～～～

変数

See the Pen
QWdVeGP by ao___ (@ao___)
on CodePen.

$変数名:値;

で変数を宣言できる

のちに$変数名を呼び出すことで、指定した値を呼び出せる

色とか都度打つのめんどくさいなと思っていたのでこれはありがたい

変数の適用範囲

See the Pen
KKaxjOJ by ao___ (@ao___)
on CodePen.

$sub-colorは.title{～}の中で宣言した変数

{～}（この括弧はルールセットという）で宣言したらそれ以外のルールセットで引き継がれない

そのため、.repeat-title{～}で

$sub-color:#abc0b8;

は使えない

See the Pen
oNBPKWe by ao___ (@ao___)
on CodePen.

変数の参照範囲を利用すれば

1つのコード内で同じ変数名に違う値を入れながら複数のルールセットで使いまわせる

インターポレーション

See the Pen
mdRGNML by ao___ (@ao___)
on CodePen.

変数を値として引っ張りたいときなどに有効なのが

#{$変数名}

で変数を呼び出すインターポレーションという手法。

今回はインターポレーションを無駄に文字の色に対して使っていますが

画像のURLなんかに使うケースが多いっぽいです

画像の保存先を変数で宣言しておいて、保存フォルダが変わったときに変数を変えれば一発で修正が終わりますねﾜｯｼｮｲ

演算

Sassでは四則演算も容易である

See the Pen
zYNJgjo by ao___ (@ao___)
on CodePen.

こんな感じでSassに書くと計算した結果でCSSに返してくれる

ただ演算子によって何点か注意点があるよう

• ＋は文字列の結合も可能
• －を使うときは前後にスペースキーを入れる
• /は以下3つのいずれかを満たさないと式として認識されない
  式を()でくくる
  値に変数が使われている
  ほかの演算子と併用

基本となる章はこれでおおむねおしまい

使ってみて慣れてから続きの章については記録していくかもです