‏StyleBop: ویرایشگر بصری CSS برای مک

StyleBop یه ویرایشگر بصری CSS مخصوص مک‌ه که می‌خواد تجربه کار با استایل‌شیت‌ها رو کاملاً متفاوت کنه. به‌جای اینکه فقط یه فایل متنی جلوت باشه، هر ruleset رو به‌صورت یه node قابل جابه‌جایی روی یه canvas نمایش می‌ده. انتخاب چندتایی هم هست که می‌تونی چندین ruleset رو همزمان ویرایش کنی.

پنل توکن‌ها تمام CSS custom propertyها رو یه‌جا جمع می‌کنه و گروه‌بندی‌شون بر اساس ruleset تعریف‌کننده‌شونه. رنگ‌ها به‌صورت live swatch با resolution کامل var() نمایش داده می‌شن. اگه بخوای یه مقدار property رو به یه متغیر تبدیل کنی، کافیه روش راست‌کلیک کنی تا به :root اضافه بشه و همه‌جای فایل به‌صورت var(--name) بازنویسی بشه — همه‌چیز در یه undo.

برای انیمیشن‌ها یه تب اختصاصی داره که @keyframes رو به‌صورت بصری ویرایش می‌کنه و با ⌘⇧A می‌شه انیمیشن جدید اضافه کرد. مدیاکوئری‌ها هم با یه کلیک دور هر ruleset پیچیده می‌شن و variant‌های responsive زیر سلکتور پایه‌شون با یه badge نمایش داده می‌شن.

یه نمونه از چیزی که StyleBop می‌تونه به‌صورت بصری ویرایش کنه:

.badge--blue-solid {
  /* ویرایش box-shadow، border-radius، filter و gradient
     از طریق popoverهای گرافیکی */
}

ویژوال پاپ‌اورها شامل grid برای box-shadow، corner‌های قابل drag برای border-radius، منحنی cubic-bezier و slider‌های filter می‌شن — همه با پیش‌نمایش زنده. Grid Visualizer هم ویرایش grid-template-columns و grid-template-rows رو به‌صورت track list تعاملی ممکن می‌کنه.

ویرایشگر property از CSS سر در میاره: autocomplete روی نام و مقدار property، color picker توکار، variable picker محدود به فایل جاری، و nudge با کلیدهای جهت‌دار که واحدها رو حفظ می‌کنه. CSS nesting بومی هم پشتیبانی می‌شه — بلوک‌های nested با & یا سلکتور descendant روی canvas به node‌های مجزا تبدیل می‌شن و موقع ذخیره دوباره به nesting برمی‌گردن.

یه تب code editor هم هست با syntax highlighting و line number که هر تغییری توش فوری روی canvas منعکس می‌شه. Smart typing هم داره: جفت‌سازی آکولاد و کوتیشن، auto-indent و autocomplete هوشمند بر اساس موقعیت cursor.

StyleBop با SwiftUI + AppKit نوشته شده، باینری کوچیکیه، آنی لود می‌شه و هیچ سرویس پس‌زمینه‌ای نداره. نیاز به macOS 14 Sonoma به بالا و Apple Silicon داره و یه پروژه نمونه هم همراهش میاد.

نکات کلیدی:

• هر ruleset یه node قابل drag روی canvas‌ه و می‌شه چندتایی انتخاب و ویرایش کرد
• پنل توکن‌ها تمام CSS custom propertyها رو یه‌جا با live color swatch نشون می‌ده
• راست‌کلیک روی هر مقدار، اون رو به CSS variable تبدیل و در کل فایل بازنویسی می‌کنه
• پشتیبانی از CSS nesting بومی، cascade layers، @container و @supports
• ویژوال پاپ‌اور برای box-shadow، border-radius، gradient، filter و grid
• ساخته‌شده با SwiftUI + AppKit؛ سبک، سریع و بدون سرویس پس‌زمینه
• فقط برای macOS 14 Sonoma به بالا و Apple Silicon