【覚書】SASSとかSCSSとか_#2
おはようございます。
今週の更新忘れるとこだった...()
というわけで覚書
今日はProgateもくもく会#9なるものに参加しています。ついでに会場から書きます。ゆるい雰囲気で個人的にはすごく好き。
これです。
前回の記事を書いてから思ったこと
前回の記事がこれ。
- SASSとSCSSって記法がどうやら少し違うらしい
- でも案件で使うのはSCSS。(括弧使う方)
- CSSを入れ子にできるんだすごい(小並感)
- 変数とか関数とか便利そうな機能がたくさんだ
- 使いこなせれば、よりスッキリしてかつメンテナンス性の高いCSSが書けそう。
こんな感じで。
知っておいて損はないというか、得しかないなあと。
今日はその便利な機能っぽいところをめも。
変数定義
CSSの値を変数定義しておいて、その変数を使いまわせるようにする。
例えば、白色(#fff)を変数に定義したい場合は以下のように書く。
(変数名のお作法とかあるかもですが、無視してます。。。)
$white-color: #fff; 変数定義の仕方として、
${変数名}: {値};
この形を覚えておけば良さそう。
関数を使う
scssにはすでにいくつかの関数が組み込まれてるっぽいです。
「rgb」とかみたことあるわ...
color: rgb(255, 255, 255);
color: rgb(100%, 100%, 100%);こんな形で、16進数の値だったり、パーセンテージでrgb値を指定する関数ですね。
関数の使い方はCSSプロパティの値のところで
{CSSプロパティ}: {関数名}({引数, ...});
こんな感じ。
そしてこの記事では書きませんが、@function とすることで自作関数も定義できるっぽいですがまたの機会に。
@mixin, @include
「ちょっと何いってるかわからない。(cv: と◯ざわ)」
ってなったのがこれ。めちゃ便利らしい。(語彙力)
======================================
ざっくりいうと、
@mixin でCSSをまとめて、
@includeを使って、@mixinでまとめたものを他の場所で呼び出せる
らしいです。
例えば、以下のような3つのboxのスタイルがあったとして、
.box1 {
width: 200px;
height: 100px;
color: #fff;
}
.box2 {
width: 200px;
height: 100px;
color: #aaa;
}
.box3 {
width: 200px;
height: 100px;
color: #000;
}widthとheightの大きさが一緒なのでもうめんどくさいじゃないですか。
っていうのを解決するのが@mixin。まとめちゃえ。
@mixin box-size {
width: 200px;
height: 100px;
}@mixin {mixin名(?)} {
{CSS定義}
}
こんな感じで定義すると、mixinとして使いまわせるそう。
で、定義したmixinを使うときには@includeを使う必要があるので、先ほど記述していた3つのboxに対して適用するとなると、以下の感じで。
@mixin box-size {
width: 200px;
height: 100px;
}
.box1 {
@include: box-size; /* これがさっきのwidth: 200px; と height: 100px;とそのまま置き換わる */
color: #fff;
}
.box2 {
@include: box-size; /* box1と同様 */
color: #aaa;
}
.box3 {
@include: box-size; /* box2と同様 */
color: #000;
}@include: {mixin名};
今回はかなり簡単な記述だけをまとめたので良さがわかりにくいかもですが、もっと長ったらしい記述をまとめると考えたらすごく良さげ。
疑問
ここまでやって思ったのが、
mixinと関数(fucntion)って何が違うん...?
です。
(そもそも今回自作関数のことよく見てないけど普通に疑問に持った。)
はい、私、ggりました。
自分の解釈ですが一言で言うならば、
mixin -> CSSのまとまりを返す
関数(function) -> 値を返す。(mixinと違って演算ができちゃう)
こんな感じですかね？違ったらごめんなさい。
まとめ
- 変数定義は${変数名}: {値};
- 関数呼び出しは{CSSプロパティ}: {関数名}({引数, ...});
- mixinの定義は以下の感じで。
@mixin {mixin名(?)} {
{CSS定義}
}
- mixinを使うときは@include: {mixin名};
- mixinと関数の違いは、CSSのまとまりを返すか、値を返すか。(というよりは演算できるかどうかとかそんな感じで考えた方がいいかも?)
認識違いとかあるかもなのでそういった場合はご指摘いただけるとありがたく🙏
次回はまたCSS関連のテーマかもしれませんし、全く関係ないテーマかもしれません。おやすみなさい。
この記事が気に入ったらサポートをしてみませんか？