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