ページ内ナビ
概要
Stylusはindent-based syntaxと通常のCSS styleの両方を扱えるstylesheet languageです。Node.js packageとstylus CLIを提供し、.styl sourceをCSSへcompileできます。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日:
主な特徴
向いている用途
既存Stylus資産や簡潔なindent記法を維持したいfrontend codebaseに向く
長年の.styl assetやStylus-specific mixin/functionを活かしつつ、Node toolchain上でCSSを生成したいprojectに適します。
出典:[2]
導入前の確認
参考にした公式資料
- [1]stylus/stylus repository(2026-10-05)
- [2]Stylus 0.64.0 README(2026-10-05)
- [3]Stylus 0.64.0 package metadata(2026-10-05)
- [4]Stylus 0.64.0 release(2026-10-05)
- [5]Stylus MIT license(2026-10-05)
編集部からの補足
Stylus 0.64.0はNode.js 16以上を要求し、release notesでNode 14 support削除を明記しています。latest stable releaseは2024年10月の0.64.0なので、新規採用ではbundler/pluginとの現行互換性も実環境で確認してください。
3ステップで試す
- 1
Stylus 0.64.0を一時projectへ導入する
Node.js 16以上の環境でstable releaseを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/stylus.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact --save-dev stylus@0.64.0 - 2
indent記法のStylus fileを作る
Stylusらしいindent syntaxで変数とnested selectorを使う最小sourceを作ります。
printf "%s\n" 'accent = #663399' '.card' ' color accent' ' &:hover' ' color white' > input.styl - 3
stylus CLIでCSSへcompileする
0.64.0のCLIでCSSを生成し、indent/nestingが通常のCSSへ変換されたことを確認します。
npx stylus input.styl -o output.css && grep -q ".card:hover" output.css
成長
成長の推移 · 直近30日
11,333 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit(直近30日)
- 0
- Open PR
- 25
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
GitHubのデータGitHubの詳細データを見る
GitHub Topics
- stylus
- css
- preprocessor
- styl
- Stars
- 11,333
- Forks
- 1,137
- Watchers
- 325
- Open Issues
- 257
- Contributors
- 181
- 所有者種別
- Organization
- 主要言語
- JavaScript
- ライセンス
- MIT
- リポジトリ最終更新
- 2025/04/24
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- js-cookie22,573 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
ブラウザCookieの作成・取得・削除と属性指定を小さなJavaScript APIで扱う
JavaScript - 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
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。