Dart Sass (scss) の基本的な使い方 Sass の公式サイトの Dart Sass のドキュメントを元に作成した基本的な使い方に関する覚書です。 公式に推奨されている実装環境が Dart Sass になって、@import や除算演算子としてのスラッシュの使用が非推奨（将来的には廃止）になり、@use や @forward が導入され、Sass 関数からビルトインモジュールへ移行されるなどの変更（Breaking Changes）があったため内容を書き換えました。 2021年12月21日 Dart Sass (scss) の基本的な使い方 Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSS を便利に使えるように拡張した言語です。 Sass には SCSS 構文とインデント構文（Sass 構文
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
calc()やclamp()関数など、CSSの計算式では、100vwなどから%をうまく作れない。そのため、%の基本フォント・サイズを描画領域に応じて決定することは難しいと考えていた。しかし、%を作れなくても、100%にピクセルを加える形でもいいことがわかった。そこで、最小で100%、最大で125%、その間は描画領域のサイズに応じてなめらかに上昇するという形の実装を、clamp()関数を使って行った。 このウェブサイトでは既に導入されているので、上記変化を確認することができる。ユーザーがどのようなフォント・サイズ設定をしていても、なめらかに変化し、うまく動いているようだ。また、ズームしても問題なく動き、フォント・サイズの変更とズームを組み合わせてもちゃんと動く。「なんでもmin()、max()、clamp()関数でやってみよう！」というのは、今だけは正しい姿勢かもしれない。 実装 html
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc(). Here, we’re going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport’s width increases, with the intent of making its behavi
Getting right to the code, here’s a working implementation: html { font-size: 16px; } @media screen and (min-width: 320px) { html { font-size: calc(16px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { html { font-size: 22px; } } It’s worth looking at our more recent post Simplified Fluid Typography for practical, clamped, viewport-based type sizing. That would scale fon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く