Dart Sass

3ステップで試す

1. 1

   Dart Sass 1.105.1を一時projectへ導入する

   review対象releaseを固定し、既存projectへ影響しない一時directoryへ導入します。

   demo=$(mktemp -d "${TMPDIR:-/tmp}/dart-sass.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact --save-dev sass@1.105.1コピー
2. 2

   変数とnestingを使うSCSS fileを作る

   Sassの変数とnested selectorを含む最小SCSSを作り、compilerで変換する入力を用意します。

   printf "%s\n" '$accent: #663399;' '.card {' ' color: $accent;' ' &:hover { color: white; }' '}' > input.scssコピー
3. 3

   sass CLIでCSSへcompileする

   1.105.1のCLIでCSSを生成し、nested selectorが通常のCSS selectorへ展開されたことを確認します。

   npx sass input.scss output.css && grep -q ".card:hover" output.cssコピー

Built with

• Dart

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• Electron123,388 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  ChromiumとNode.jsを同梱し、HTML・CSS・JavaScriptから3 OS向けdesktop appを構築するruntime

  C++
• Animate.css82,849 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  classを追加するだけで再利用可能なCSS animationをUIへ適用する

  CSS
• normalize.css53,505 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  browserのuseful defaultを残しながら、default styleの差異と既知bugを補正する

  CSS
• PostCSS28,974 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  CSSをASTへ変換し、JavaScript pluginでbuild時のstyle処理を組み立てる

  TypeScript
• Autoprefixer22,211 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  BrowserslistとCan I Use dataから必要なvendor prefixだけを自動生成する

  JavaScript
• Less17,025 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  変数・mixin・nestingを使うstylesheetをlesscで通常のCSSへcompileする

  JavaScript