カテゴリー：Sass
-
ブラウザの開発者ツールで表示されるソースコードはあくまでSassなどの出力結果になります。なので、出力結果がsassのソースのどの行に対応しているのかはわかりません。これでは開発時に不便ですので、「sourcemap(ソースマップ）」という…
-
【Sass】「Gulp」のプラグインについて
03.06
gulp-notify gulpタスクの終了時やタスクでエラーが発生した場合にデスクトップにエラーを通知してくれます。通常ターミナルなどはデスクトップの裏側に配置することも多いのでこれを使うとエラーに早く気づけて便利です。 gulp-p…
-
【Sass】フレームワークについて
02.27
Sassフレームワークとは？ レイアウトやパーツなどCSSでよく使われるパーツをまとめたものになります。Sassのmixin集です。 種類 機能拡張系フレームワーク Bourbon Sassのミックスイン集、CSSフレームワークの…
-
【Sass】「ユーザー定義関数」について
02.27
ユーザー定義関数とは？ Sassに用意されていない関数をユーザー自身が用意することができる機能です。 実装例 [crayon-63e147fc8859a160189680/] その他機能 「デフォルト引数」のやり方はmix…
-
【Sass】関数について
02.27
Sassにおける関数とmixinの違い 関数は値を返しますが、mixinはプロパティと値のセットを返します。 ネイティブ関数（組み込み関数） Sassであらかじめ用意されている関数のことです。 round 四捨五入します。 [c…
-
【Sass】「繰り返し処理」について
02.27
実装例 余白調整用のスタイルシートを出力する例になります。 変換前 インターポレーションと組み合わせて使うことが多いです。 [crayon-63e147fc892f5268526328/] 変換後 [crayon-63e147f…
-
【Sass】「条件分岐」について
02.27
実装 変換前 [crayon-63e147fc897bd082209263/] 変換後 [crayon-63e147fc897c7595076096/] 使える比較演算子 以下の比較演算子は普通に使えます。 == …
-
【Sass】「継承」について
02.27
指定したセレクタを引き継いで拡張することができる機能です。 mixinとの使い分け mixin 単純に共通部分を外出ししたい場合に使います。 継承 例えば、buttonとinfo_buttonのように同じカテゴリの内容の共通する項…
-
【Sass】「mixin」について
02.26
基本的な使い方 変換前 [crayon-63e147fc8a010417189563/] 変換後 [crayon-63e147fc8a019768860630/] 命名規則 半角数字から始まる名前はつけられません。 …
-
CSS 実装例 [crayon-63e147fc8a46c815120588/] 仕組み ブラウザが解釈して外部ファイルを実際に読み込みます。 ファイル数が増えるので、リクエスト数が増えてしまいます。 SaSSで…