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