OSS探訪GitHubでログイン

indented syntaxと通常のCSS styleを同じcompilerで扱うexpressiveなstylesheet language

スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標(上限なし)です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
11,333
主要言語
JavaScript
ライセンス
MIT
リポジトリ最終更新
2025/04/24
ページ内ナビ

概要

Stylusはindent-based syntaxと通常のCSS styleの両方を扱えるstylesheet languageです。Node.js packageとstylus CLIを提供し、.styl sourceをCSSへcompileできます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日:

主な特徴

indent syntaxとregular CSS styleを選べる

READMEはindented syntaxと通常のCSS styleの両方をsupportすると説明しており、codebaseの好みに合わせて記法を選べます。

出典:[2]

stylus CLIでcompileとwatchを行う

CLIは.styl fileをCSSへcompileでき、-wでsource変更をwatchしながらoutputを更新できます。

出典:[2]

npm packageとしてNode buildへ組み込む

packageはJavaScript APIとstylus binaryを提供し、既存Node-based asset pipelineへ統合できます。

出典:[3]

向いている用途

既存Stylus資産や簡潔なindent記法を維持したいfrontend codebaseに向く

長年の.styl assetやStylus-specific mixin/functionを活かしつつ、Node toolchain上でCSSを生成したいprojectに適します。

出典:[2]

導入前の確認

0.64.0はNode.js 16以上を要求する

package metadataはNode >=16を指定し、0.64.0 release notesはNode 14 supportを削除したと明記しています。

出典:[3][4]

新規採用では周辺toolとの現行互換性を確認する

latest stable releaseは2024年10月の0.64.0です。repositoryはarchivedではありませんが、bundler/pluginのversion組み合わせは導入環境で検証してください。

出典:[4][1]

参考にした公式資料

  1. [1]stylus/stylus repository(2026-10-05)
  2. [2]Stylus 0.64.0 README(2026-10-05)
  3. [3]Stylus 0.64.0 package metadata(2026-10-05)
  4. [4]Stylus 0.64.0 release(2026-10-05)
  5. [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. 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. 2

    indent記法のStylus fileを作る

    Stylusらしいindent syntaxで変数とnested selectorを使う最小sourceを作ります。

    printf "%s\n" 'accent = #663399' '.card' ' color accent' ' &:hover' ' color white' > input.styl
  3. 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
公式READMEで確認

成長

成長の推移 · 直近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で投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

このページを読んで、次に何をすればよいか分かりましたか?