Less

3ステップで試す

1. 1

   Less 4.9.1を一時projectへ導入する

   Node.js 18以上の環境でreview対象releaseを固定して導入します。

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

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

   Lessの変数とnested selectorを含む最小sourceを用意します。

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

   lesscでCSSへcompileする

   lesscでCSSを生成し、変数とnestingが通常のCSSへ変換されたことを確認します。

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

Built with

• JavaScript

カテゴリとタグ

GitHubデータ

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

あわせて探訪

• i18next8,637 Stars

  共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語

  翻訳キー・複数形・補間・resource loadingをUI frameworkから切り離すi18n core

  JavaScript
• Tauri111,593 Stars

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

  web frontendとRust native layerをsystem WebView上のdesktop/mobile appへまとめる

  Rust
• Storybook91,200 Stars

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

  UI状態をstoryとして保存し、Docs・interaction test・AI toolへ再利用するfrontend workshop

  TypeScript
• Animate.css82,849 Stars

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

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

  CSS
• normalize.css53,505 Stars

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

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

  CSS
• Expo52,566 Stars

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

  React NativeアプリをAndroid・iOS・Webへ一つのprojectから展開する

  TypeScript