ホーム>プログラミング関連>その他のソースコード
ダウンロード

Sass の Dart 実装。 Sass は CSS を楽しくします。

  • ダーツサスの使い方

    • sass_apiパッケージ

    • ブラウザ内のダーツサス

    • レガシー JavaScript API

    • Jest で Sass を使用する

    • Chocolatey または Scoop から (Windows)

    • Homebrew から (macOS)

    • スタンドアロン

    • npmから

    • パブから

    • ソースから

    • ドッカー内

  • なぜダーツなのか？

  • 互換性ポリシー

    • ブラウザの互換性

    • Node.js の互換性

    • 無効なCSS

  • 埋め込みダーツサス

    • 使用法

  • Ruby Sass との動作の違い

ダーツサスの使い方

Dart Sass をインストールして実行するには、環境とニーズに応じていくつかの方法があります。

Chocolatey または Scoop から (Windows)

Windows 用 Chocolatey パッケージ マネージャーまたは Scoop パッケージ マネージャーを使用している場合は、次のコマンドを実行して Dart Sass をインストールできます。

チョコインストールサス

または

スクープインストールサス

これにより、Dart Sass を実行するsass実行可能ファイルがコマンドラインに作成されます。詳細については、CLI のドキュメントを参照してください。

Homebrew から (macOS または Linux)

Homebrew パッケージ マネージャーを使用している場合は、次のコマンドを実行して Dart Sass をインストールできます。

醸造インストール sass/sass/sass

これにより、Dart Sass を実行するsass実行可能ファイルがコマンドラインに作成されます。

スタンドアロン

GitHub リリース ページから、Dart VM と実行可能ファイルのスナップショットを含む、オペレーティング システム用のスタンドアロンの Dart Sass アーカイブをダウンロードできます。それを抽出し、ディレクトリをパスに追加し、ターミナルを再起動すると、 sass実行可能ファイルを実行する準備が整います。

npmから

Dart Sass は、JavaScript にコンパイルされて、npm パッケージとして入手できます。 npm install -g sass使用してグローバルにインストールすると、 sass実行可能ファイルにアクセスできるようになります。 npm install --save-dev sassを使用してプロジェクトに追加することもできます。これにより、実行可能ファイルとライブラリが提供されます。

 const sass = require('sass');const result = sass.compile(scssFilename);// または// `compileAsync()` は `compile()` より大幅に遅いことに注意してください。const result = await sass.compileAsync( scssファイル名);

完全な API ドキュメントについては、Sass Web サイトを参照してください。

ブラウザ内のダーツサス

sass npm パッケージはブラウザで直接実行することもできます。名前変更 (esbuild の--keep-namesなど) を無効にしている限り、すべての主要な Web バンドラーと互換性があります。また、バンドルせずに ECMAScript モジュールとしてブラウザから直接インポートすることもできます ( node_modulesも提供されていると仮定します)。

 <script type="importmap">
  {"imports": { "immutable": "./node_modules/immutable/dist/immutable.es.js", "sass": "./node_modules/sass/sass.default.js"}
  }</script><!-- インポート マップをサポートしない Safari 16.3 などのブラウザをサポートします。 --><script async src="https://unpkg.com/es-module-shims@^1.7.0"crossorigin="anonymous"></script><script type="module">
  import * as sass from 'sass';

  console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script>

または CDN から:

 <script type="importmap">
  {"imports": { "immutable": "https://unpkg.com/immutable@^4.0.0", "sass": "https://unpkg.com/sass@^1.63.0/sass.default .js"}
  }</script><!-- インポート マップをサポートしない Safari 16.3 などのブラウザをサポートします。 --><script async src="https://unpkg.com/es-module-shims@^1.7.0"crossorigin="anonymous"></script><script type="module">
  import * as sass from 'sass';

  console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script>

または、そのすべての依存関係をバンドルすることもできます。

 <script type="モジュール">
  import * as sass from 'https://jspm.dev/sass';

  console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script>

ブラウザーはファイルシステムにアクセスできないため、 compile()関数とcompileAsync()関数は使用できません。他のファイルをロードしたい場合は、カスタム インポーターをcompileString()またはcompileStringAsync()に渡す必要があります。従来の API もブラウザではサポートされていません。

レガシー JavaScript API

Dart Sass は、Node Sass と完全に互換性のある古い JavaScript API (以下に示すいくつかの例外を除く) もサポートしており、 render()関数とrenderSync()関数の両方をサポートしています。この API は非推奨とみなされ、Dart Sass 2.0.0 で削除される予定であるため、新しいプロジェクトでは使用しないでください。

Sass による従来の JavaScript API のサポートには、次の制限があります。

  • outputStyleの"expanded"および"compressed"値のみがサポートされます。

  • Dart Sass はprecisionオプションをサポートしていません。 Dart Sass は、既存のすべてのブラウザに対してデフォルトで十分に高い精度を設定しており、これをカスタマイズ可能にするとコードの効率が大幅に低下します。

  • Dart Sass は、 sourceCommentsオプションをサポートしていません。ソース マップは、生成されたセレクターの起点を見つけるために推奨される方法です。

Jest で Sass を使用する

Jest を使用してテストを実行している場合は、デフォルトのテスト環境が JavaScript の組み込みのinstanceof演算子を破壊するという長年のバグがあることに注意してください。 Dart Sass の JS パッケージは、 instanceofかなり頻繁に使用するため、Sass の破壊を避けるために、 jest-environment-node-single-contextをインストールし、Jest 構成にtestEnvironment: 'jest-environment-node-single-context'を追加する必要があります。 。

パブから

Dart ユーザーの場合は、 pub global activate sass使用して Dart Sass をグローバルにインストールできます。これにより、 sass実行可能ファイルが提供されます。これを pubspec に追加してライブラリとして使用することもできます。接頭辞sassを付けてインポートすることを強くお勧めします。

 import 'package:sass/sass.dart' as sass;void main(List<String> args) { print(sass.compile(args.first));
}

詳細については、Dart API ドキュメントを参照してください。

sass_apiパッケージ

Dart ユーザーは、 sass_apiパッケージを介してより詳細な API にアクセスすることもできます。これにより、完全なコンパイルを実行せずに Sass のロードを解決するための Sass AST および API へのアクセスが提供されます。メインのsassパッケージとは独立してバージョン番号を増やすことができるように、独自のパッケージに分離されています。

ソースから

このリポジトリをすでにチェックアウトしていると仮定します。

  1. ダーツをインストールします。インストーラーを使用せずにアーカイブを手動でダウンロードする場合は、SDK のbinディレクトリがPATH上にあることを確認してください。

  2. Bufをインストールします。これは、組み込みコンパイラのプロトコル バッファを構築するために使用されます。

  3. このリポジトリで、 dart pub get実行します。これにより、Dart Sass の依存関係がインストールされます。

  4. dart run grinder protobuf実行します。これにより、埋め込みプロトコル定義がダウンロードされ、構築されます。

  5. dart bin/sass.dart path/to/file.scss実行します。

それでおしまい！

ドッカー内

次の Dockerfile コマンドを使用して、Docker 内で Dart Sass をインストールして実行できます。

 # Dart stageFROM bufbuild/buf AS bufFROM dart:stable AS dart# scss ファイルを追加COPY --from=another_stage /app /app# プロトコル バッファ バイナリを含めるCOPY --from=buf /usr/local/bin/buf /usr/local/ bin/WORKDIR /dart-sassRUN git clone https://github.com/sass/dart-sass.git 。 &&
   ダーツパブゲット&&
   dart run Grinder protobuf# これは、scss ファイルで sass.dart を実行する場所です。RUN dart ./bin/sass.dart /app/sass/example.scss /app/public/css/example.css

なぜダーツなのか？

Dart Sass は、Sass 言語の正規実装として Ruby Sass に取って代わりました。 Dart を選択したのは、次のような多くの利点があるためです。

  • 速いですね。 Dart VM は高度に最適化されており、常に高速化されています (最新のパフォーマンス数値については、 perf.md参照してください)。 Ruby よりもはるかに高速で、C++ とほぼ同等です。

  • 持ち運び可能です。 Dart VM には外部依存関係がなく、アプリケーションをスタンドアロンのスナップショット ファイルにコンパイルできるため、Dart Sass を 3 つのファイル (VM、スナップショット、ラッパー スクリプト) のみとして配布できます。 Dart は JavaScript にコンパイルすることもできるため、大多数のユーザーがすでに使用している npm を介して Sass を配布することが簡単になります。

  • 書くのは簡単です。 Dart は C++ よりも高レベルの言語であるため、メモリ管理やビルド システムに多くの手間がかかりません。また、静的に型付けされるため、Ruby よりも自信を持って大規模なリファクタリングを行うことが簡単になります。

  • 投稿者にとってはよりフレンドリーです。 Dart は Ruby よりも学習が大幅に簡単で、特に Google の多くの Sass ユーザーはすでに Dart に精通しています。貢献者が増えると、開発がより速く、より一貫したものになります。

互換性ポリシー

ほとんどの場合、Dart Sass はセマンティック バージョニングに従っています。以下のすべてはバージョン管理された API の一部であると考えられます。

  • Dart Sass によって実装された Sass 言語のセマンティクス。

  • Dart API。

  • JavaScript API。

  • コマンドラインインターフェース。

Dart Sass には Dart、JavaScript、スタンドアロン ディストリビューション間で共有される単一バージョンがあるため、実際には 1 つ以上のディストリビューションに重大な変更がない場合でも、メジャー バージョン番号を増やすことを意味する場合があります。ただし、変更を最小限に抑えるために、破壊的変更の数を制限し、それらをできるだけ少ないリリースにグループ化するよう努めます。各リリースのすべての変更を完全に理解するために、変更ログを使用することをユーザーに強くお勧めします。

重大な変更がメジャー バージョン リビジョン以外で行われる場合がある例外が 1 つあります。 CSS が何らかの形で既存の Sass 構文と互換性のない機能を追加する場合があります。 Sass は CSS との完全な互換性を重視しているため、CSS との互換性を維持するために古い Sass コードとの互換性を解除する必要がある場合があります。

このような場合、動作が変更されるスタイルシートに対して非推奨の警告を発する Sass のバージョンを最初にリリースします。その後、これらの非推奨の警告が含まれるバージョンのリリースから少なくとも 3 か月後に、Sass 言語のセマンティクスに対する重大な変更を含むマイナー バージョンをリリースします。

ブラウザの互換性

一般に、Dart Sass の CSS 出力に対する変更により、CSS が実際のブラウザーで動作しなくなるような変更は、重大な変更であると考えられます。ただし、そのような変更によって大きなメリットが得られ、まれに使用される少数のブラウザーに悪影響を及ぼすだけの場合もあります。メジャー バージョン リリースでそのような変更をブロックする必要はありません。

そのため、StatCounter GlobalStats によると、変更によりブラウザの世界市場シェアの 2% 未満との互換性が失われる場合、その変更を加えた Dart Sass のマイナー バージョンをリリースする可能性があります。

Node.js の互換性

Node.js の特定のバージョンのサポートが Node.js でサポートされている限り、そのバージョンのサポートの終了は重大な変更であると考えられます。これは、Node.js リリース ページに従って、リリースが現在、アクティブ LTS、またはメンテナンス LTS としてリストされていることを意味します。 Node.js バージョンが LTS から外れると、Dart Sass は必要に応じてサポートを自由に中止できると考えています。

無効なCSS

無効な CSS 出力を生成する Sass スタイルシートの動作の変更は、重大な変更とはみなされません。このような変更は、新しい CSS 機能のサポートを追加する場合にほぼ常に必要ですが、新しいメジャー バージョンがリリースされるまでそのようなすべての機能を延期することは、ほとんどのユーザーにとって過度の負担となります。

たとえば、Sass がcalc()式の解析を開始すると、無効な式calc(1 +) Sass エラーになり、以前はそのまま渡されていました。 calc(1 +)はそもそも有効な CSS ではなかったため、これは重大な変更とはみなされませんでした。

埋め込みダーツサス

Dart Sass には、Embedded Sass プロトコルのコンパイラ側の実装が含まれています。これはホスト言語に埋め込まれるように設計されており、ユーザーが Sass を呼び出してカスタム関数とインポーターを定義するための API を公開します。

使用法

  • sass --embedded組み込みコンパイラを起動し、stdin をリッスンします。

  • sass --embedded --version id = 0のversionResponse JSON に出力して終了します。

Dart Sass を npm パッケージとしてインストールする場合、 --embeddedコマンドライン フラグは使用できません。 --embeddedでは他のコマンドライン フラグはサポートされません。

Ruby Sass との動作の違い

Dart Sass と Ruby Sass の間には、意図的な動作の違いがいくつかあります。これらは通常、Ruby Sass に望ましくない動作が発生する場所であり、互換性のある動作を実装するよりも正しい動作を実装する方が大幅に簡単です。これらにはすべて、参照動作を更新するために Ruby Sass に対する追跡バグが含まれている必要があります。

  1. @extend 、 selector-extend()の 2 番目の引数と同様に、単純なセレクターのみを受け入れます。第 1599 号を参照してください。

  2. 件名セレクターはサポートされていません。第 1126 号を参照してください。

  3. 疑似セレクター引数は、より制限されたカスタム解析ではなく、 <declaration-value>として解析されます。第 2120 号を参照してください。

  4. 数値精度は 10 に設定されています。問題 1122 を参照してください。

  5. インデントされた構文パーサーはより柔軟です。ドキュメント全体で一貫したインデントを必要としません。問題 2176 を参照してください。

  6. カラーはチャネルごとの演算をサポートしません。第 2144 号を参照してください。

  7. 単位のない数値は、同じ値を持つ単位数値に==はありません。さらに、マップ キーは== -equality と同じロジックに従います。第 1496 号を参照してください。

  8. パーセント単位のrgba()およびhsla()アルファ値はパーセントとして解釈されます。他のユニットの使用は禁止されています。第 1525 号を参照してください。

  9. 関数に渡される可変引数が多すぎるとエラーになります。第 1408 号を参照してください。

  10. メディア クエリの外側に同一の@extendが定義されている場合、 @extendメディア クエリの外側に到達できるようにします。問題 1050 が修正されると無関係になるため、これは明示的に追跡されません。

  11. プレースホルダー セレクターを含む一部のセレクター疑似は、Ruby Sass ではコンパイルされない場所でコンパイルされます。これは、問題のセレクターのセマンティクスとよりよく一致し、より効率的です。問題 2228 を参照してください。

  12. 古いスタイルの:property value構文は、インデントされた構文ではサポートされません。問題 2245 を参照してください。

  13. 参照コンビネータはサポートされていません。第 303 号を参照してください。

  14. ユニバーサルセレクターの統合は対称的です。問題 2247 を参照してください。

  15. @extend一致しても統合に失敗した場合にはエラーを生成しません。第 2250 号を参照してください。

  16. Dart Sass は現在、UTF-8 ドキュメントのみをサポートしています。もっとサポートしたいのですが、Dart は現在サポートしていません。たとえば、dart-lang/sdk#11744 を参照してください。

免責事項: これは Google の公式製品ではありません。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて