Stylus

概要

Stylusは、効率的でエレガントなCSSの記述を可能にする動的スタイルシート言語です。Node.js環境で動作し、豊富な機能と柔軟な構文により、CSSの生産性を大幅に向上させます。

インストールと設定

Node.jsでのインストール

npm install stylus -g

基本的な使用方法

stylus input.styl -o output.css

基本構文

セレクタとプロパティ

Stylusは通常のCSSのような記法と、インデントベースの簡略記法の両方をサポートします：

// 通常の記法
.container {
  width: 100%;
  padding: 20px;
}

// 簡略記法
.container
  width 100%
  padding 20px

変数

変数を使用してスタイルを定義できます：

primary-color = #3498db

.button
  background-color primary-color
  &:hover
    background-color darken(primary-color, 10%)

高度な機能

ミックスイン

再利用可能なスタイルブロックを定義できます：

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

.button
  border-radius(5px)

演算子

数値の計算や色の操作が可能です：

.container
  width 100% - 20px
  margin (10px * 2)
  background lighten(#000, 50%)

制御構文

条件分岐

support-ie = true

if support-ie
  .container
    zoom 1
else
  .container
    clear both

繰り返し

for i in 1..5
  .col-{i}
    width (i * 20%)

関数とヘルパー

組み込み関数

• rgba()
• darken()/lighten()
• unit()
• type()

カスタム関数

calculate-width(columns)
  return columns * (100% / 12)

.col-6
  width calculate-width(6)

インポートとモジュール化

ファイルのインポート

@import 'variables'
@import 'mixins'
@import 'components/*'

モジュール構成

• base/
• components/
• layouts/
• utils/

ベストプラクティス

コード整理

• 変数名の命名規則
• ミックスインの適切な使用
• ファイル構成の最適化

パフォーマンス

• ネストの深さを制限
• 不要な演算の回避
• 効率的なセレクタの使用

デバッグとトラブルシューティング

デバッグ方法

• inspect()関数の使用
• コンパイルエラーの解釈
• ソースマップの活用

よくある問題

• スコープの問題
• 優先順位の衝突
• ブラウザ互換性

プラグインとツール

主要なプラグイン

• stylus-loader (webpack用)
• gulp-stylus
• grunt-contrib-stylus

エディタサポート

• VS Code拡張
• Sublime Text用パッケージ
• WebStorm/IntelliJ IDEA統合

メディアクエリ =

レスポンシブデザイン

$tablet = 768px
$desktop = 1024px

@media (min-width: $tablet)
  .container
    width 750px

@media (min-width: $desktop)
  .container
    width 970px

プリプロセッサ機能

ネスト

.article
  h1
    font-size 2em
    &:hover
      color #000
  p
    line-height 1.6

パフォーマンス最適化

コンパイルオプション

• 圧縮
• ソースマップ生成
• キャッシュの活用

バージョン互換性

破壊的変更

主要なバージョン間の変更点と移行ガイド

コミュニティリソース

ドキュメント

• 公式ガイド
• チュートリアル
• サンプルプロジェクト

サポート

• GitHubイシュー
• コミュニティフォーラム
• Stack Overflow