Sass ブログ

9 ページ中 1 ページ

  • Sass の色空間と広色域カラー

    2024年9月11日投稿 Miriam Suzanne

    広色域カラーが Sass に登場！

    明確にしておきます。`oklch(…)` や `color(display-p3 …)` のような広色域 CSS カラーフォーマットは、2023年5月以降、主要ブラウザですべて利用可能になりました。しかし、それ以前から、これらの新しいカラーフォーマットは Sass で *許可* されていました。これは Sass の私のお気に入りの機能の1つです。新しい CSS のほとんどは、「公式」のサポートやアップデートを必要とせずに *そのまま動作* します。Sass が未知の CSS を検出すると、そのコードをブラウザに渡します。すべてを事前に処理する必要はありません。

    多くの場合、それで十分です。カスケードレイヤーとコンテナクエリがブラウザで展開されたとき、Sass が行うべきことは何もありませんでした。しかし、新しい CSS カラーフォーマットは少し異なります。カラーは Sass のファーストクラスのデータ型であるため、常に *そのまま* 渡したいとは限りません。ブラウザに送信する前に、多くの場合、カラーの操作と管理を行う必要があります。

    色空間についてすべてご存知ですか？新しい Sass の機能にスキップ！

    カラーフォーマットのトレードオフカラー…

  • Node Sass はサポート終了です

    2024年7月24日投稿 Natalie Weizenbaum

    Node Sass を廃止する時がついに来ました。LibSass の Node.js ラッパーである Node Sass は、JavaScript エコシステムで利用可能な最初の公式 Sass コンパイラであり、Sass がその起源である Ruby コミュニティの範囲を超えて成長する上で大きな役割を果たしましたが、1年半新しいリリースがなく、最新のメンテナは更新を続ける帯域幅がなくなりました。

    npm パッケージ は非推奨としてマークされており、GitHub リポジトリ は、どの Sass リポジトリがまだ開発されているかについての混乱を軽減するためにアーカイブされました。Node Sass をまだ使用している場合は、この機会に主要な実装であるDart Sassに移行することを強くお勧めします。

    Node Sass が使用していたLibSass実装は非推奨ですが、まだサポート終了ではありません。メインテナーである Marcel Greter が時々修正を行っているためです。ただし、Node.js からこの実装を使用するための公式にサポートされている方法はもうありません。

    この機会に、…を使用してくれたすべての人に感謝したいと思います。

  • `pkg:`インポータを発表

    2024年2月16日投稿 Natalie Weizenbaum

    数ヶ月前、共有された `pkg:` スキームを使用してさまざまなパッケージマネージャーからパッケージを読み込むことができるインポータの新しい標準に関する提案について、フィードバックを求めました。また、Node.js のモジュール解決アルゴリズムをサポートする組み込み `pkg:` インポータについても同様です。本日、この機能が Dart Sass 1.71.0 でリリースされたことをお知らせできることを嬉しく思います！

    もう `loadPaths` オプションに `node_modules` を手動で追加したり、ネストされたパッケージが機能するかどうかを心配する必要はありません。URL に `~` を追加して移植性をすべて放棄する必要もありません。これで、`importers: [new NodePackageImporter()]` を渡して `@use 'pkg:library'` と記述するだけで、すぐに機能します。

    `pkg:` インポータとは？`pkg:` インポータとは？ パーマリンク

    `pkg:` インポータは、カスタムインポータ を記述することで誰でも実装できる仕様だと考えてください。いくつかのルールに従います。Node.js モジュールアルゴリズム用に1つ実装しましたが、Sass を読み込むものを実装することもできます…

  • 意見募集：パッケージインポータ

    2023年9月26日投稿 James Stuckey Weber

    Sass ユーザーは、既存のテーマをカスタマイズしたり、スタイルユーティリティにアクセスするために、依存関係からのスタイルを使用する必要があることがよくあります。従来、Sass は依存関係からパッケージを使用するための標準的な方法を指定していませんでした。これにより、Webpack の `~` プレフィックスや `loadPaths` への `node_modules` の追加など、さまざまなドメイン固有のソリューションが生じてきました。

    これはよくある問題点であり、依存関係に依存しにくくなる可能性があります。また、プロジェクトを新しいビルドプロセスに移行するのも難しくなる可能性があります。

    パッケージインポータパッケージインポータ パーマリンク

    ユーザーが `pkg:` URL スキームを使用して、特定の環境の解決標準と規則を使用して依存関係 URL を解決するように Sass に指示できる新しいタイプのインポータを提案しています。

    最大のユースケースに対処するために、Node エコシステム用の組み込みパッケージインポータを提案しています。パッケージ作成者には、配布された `package.json` 内のパッケージのエントリポイントについて、`sass` 条件付きエクスポート を定義することをお勧めします。たとえば、次の `package.json` を含む…

  • ブラウザでの Sass

    2023年7月7日投稿 Natalie Weizenbaum

    Sass の歴史を通じて、私たちが先駆けてきた機能の多くがブラウザで採用されてきました。CSS 変数、数学関数、そして最近ではネストはすべて Sass によって着想を得ています。しかし、*Sass 自体* をブラウザでコンパイラとして実行することは、これまで不可能でした…今までは。

    Dart Sass 1.63 のリリースにより、ブラウザで直接実行するための `sass` npm パッケージへのサポートを正式に追加しました。プレイグラウンドや Web IDE の作成者は、Sass をコンパイルするためにサーバー呼び出しを行う必要がなくなりました。今では、ページにロードしてすぐに使用できます。

    実際、今すぐ試すことができます！開発者コンソールを開いて、次を実行してください。

    const sass = await import('https://jspm.dev/sass');
sass.compileString('a {color: #663399}');

    他にどのように使用できますか？他にどのように使用できますか？ パーマリンク

    ブラウザでの Sass をできるだけ多くの方法で使用できるように最善を尽くしました。…できます。

次ページ