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

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

こちらのテキストに沿って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に返してくれる

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

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

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

投稿記事一覧に戻る

コメント

コメントはありません

コメントする

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。



CAPTCHA