フォントや画像をvwで指定するmixin - レスポンシブしやすい設計方法
今回はフォントや画像をvwで指定するmixinについて紹介します。ブラウザサイズに応じてサイズが可変できるので柔軟なレスポンシブが可能です。 説明環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.52.1 フォントや画像をvwで指定するmixin vwで指定するためには、px数値をvwに変換する必要があります。そのためにSassのfuctionとmixinを使います。 mixinに書くこと vwの指定をするために、以下のmixinを書きます。 //pxをvwに変換するfunction @function _get_vw($size, $viewport: 375) { $rate: calc(100 / $viewport); @return $rate * $size * 1vw; } //フォント用のmixin @mixin font
Sassで@useと@forwardを使ったサイト設計 - @importから切り替える手順
今回はSassの@useと@forwardを使ったサイト設計について説明します。 前提条件 非推奨予定の@importは使わない@useと@forwardを使ったDart Sassを採用 説明環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.57.0 今後は@importを使ったファイルの読み込みが非推奨になるため、@useと@forwardを使ったDart Sassに切り替える必要があります。 @importは遅くとも2021年10月1日には非推奨@importは遅くとも2022年10月1日にサポート終了 さっそくFLOCSSのファイル構成を使って@useと@forwardの使い方を説明していきます。FLOCSS構造やサイト設計については以下を参考にしてみてください。 |_sass/ |- global | |- setting/（変数
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
