アーカイブ：2022年 2月
-
【Sass】フレームワークについて
02.27
Sassフレームワークとは？ レイアウトやパーツなどCSSでよく使われるパーツをまとめたものになります。Sassのmixin集です。 種類 機能拡張系フレームワーク Bourbon Sassのミックスイン集、CSSフレームワークの…
-
【Sass】「ユーザー定義関数」について
02.27
ユーザー定義関数とは？ Sassに用意されていない関数をユーザー自身が用意することができる機能です。 実装例 [crayon-628f43083c946714532997/] その他機能 「デフォルト引数」のやり方はmix…
-
【Sass】関数について
02.27
Sassにおける関数とmixinの違い 関数は値を返しますが、mixinはプロパティと値のセットを返します。 ネイティブ関数（組み込み関数） Sassであらかじめ用意されている関数のことです。 round 四捨五入します。 [c…
-
【Sass】「繰り返し処理」について
02.27
実装例 余白調整用のスタイルシートを出力する例になります。 変換前 インターポレーションと組み合わせて使うことが多いです。 [crayon-628f43083dc17302576269/] 変換後 [crayon-628f430…
-
【Sass】「条件分岐」について
02.27
実装 変換前 [crayon-628f43083e0b2637994809/] 変換後 [crayon-628f43083e0bb205419685/] 使える比較演算子 以下の比較演算子は普通に使えます。 == …
-
【Sass】「継承」について
02.27
指定したセレクタを引き継いで拡張することができる機能です。 mixinとの使い分け mixin 単純に共通部分を外出ししたい場合に使います。 継承 例えば、buttonとinfo_buttonのように同じカテゴリの内容の共通する項…
-
【Sass】「mixin」について
02.26
基本的な使い方 変換前 [crayon-628f43083e906024000137/] 変換後 [crayon-628f43083e90f538389659/] 命名規則 半角数字から始まる名前はつけられません。 …
-
CSS 実装例 [crayon-628f43083ed85205499786/] 仕組み ブラウザが解釈して外部ファイルを実際に読み込みます。 ファイル数が増えるので、リクエスト数が増えてしまいます。 SaSSで…
-
実装例 結合前 ファイル1 [crayon-628f43083f136212903223/] ファイル2 [crayon-628f43083f140462837403/] 結合後 以下のようなファイルが生成されます。 [cr…
-
【Sass】「演算」の基本
02.26
演算のユースケース 例えば、「padding: 14px」と設定されていた場合にどういう基準を元に14pxと設定したのかそのソースを見ただけではわかりません。もちろんコメントなどをすることもいいことだとは思いますが、何かしら演算の結果そう…