.luis ile ihtiyacınız kadarını üretin

@for, @if, @fun ile sadece ihtiyacınız kadar üretin, Observed ile sadece kullanılan stiller oluşturulsun.

styles.luis

/* Obje değişkenlerin esnekliğini kullanın */
--colors: {
  brand:  #0069c6;
  accent: #0098a7;
  text:   #0f1923;
};

--space: { sm: 8px; md: 16px; lg: 32px; };
--cols: [1-4];

@for(n, var(--cols)) {
  .grid-${n}?! {
    grid-template-columns: repeat(${n}, 1fr);
  }
}

.card {
  padding: var(--space.md);
  color:   var(--colors.text);
  border:  1px solid var(--colors.brand);
}

output.css

/* Initial Observed olarak tanımlanan grid-1, grid-2, grid-3 
DOM'da olmadığında üretilmezler */

.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* grid-4 DOM'da olduğu için üretildi */

.card {
  padding: 16px;
  color:   #0f1923;
  border:  1px solid #0069c6;
}

Esnek dil yapısı

LentyStyle, kaynak dil, compiler, browser runtime, hybrid ve SSR akışlarını aynı ekosistemde toplar.

Object & Array Değişkenler

Standart CSS değişkenlerinin ötesine geçin. --colors: { brand: #0069c6;}, --range:[1-8] gibi object ve array değişkenler tanımlayın.

@for / @if Kontrol Akışı

CSS üretmek için döngü ve koşul yazın. Utility class setleri, koşullu kural üretimi — tamamı derleme zamanında gerçekleşir.

@fun Fonksiyonlar

Block Emit, Inline Value Return ve Property Inline Return modlarıyla çalışan CSS fonksiyonları. Lokal değişkenler ve ${expr} ifade motoru dahil.

Observed Seçiciler

? ile dinamik DOM varlık takibi, ?! ile yalnızca ihtiyacınız olan kurallar üretilir.

Hybrid & SSR

Route-aware CSS üretimi. Build-time snapshot veya request-time orchestration.

Guard & Güvenlik

Core içindeki guard subpath'leri runtime URL policy, hybrid source doğrulama ve SSR envelope taraması için fail-closed güvenlik katmanı sağlar.

İhtiyacınıza göre kullanın

Core, Hybrid, SSR paketini kullanım modelinize göre ekleyin.

@lentystyle/core

Compiler, runtime ve public guard yüzeylerini dışa açan ana paket.

@lentystyle/hybrid

Build-time HTML snapshot üzerinde route-aware CSS üretimi.

@lentystyle/ssr

Request-time CSS orchestration ve server tarafı entegrasyon akışı.

.luis

.luis dili, CSS'in geçerliliğini koruyarak üstüne programatik bir katman ekler. Öğrenme eğrisi minimumdur.

Standart CSS tamamıyla geçerli
Standart CSS doğrudan .luis içinde çalışır.
Object/Array değişkenler
Array ve Obje değişkenlerinde var(--theme.color), var(--breaks[0]), var(--breaks[0].sm) gibi esnek erişim.
Compile-time hesaplamalar
${i * 4}px, ${(i + 2) * 3}px gibi ifadeler CSS'e statik olarak yazılır.
Import zinciri
Compiler/build akışında .luis ve CSS dosyaları import edilebilir; browser runtime .luis import hedeflerini ayrıca fetch etmez.

Object Var @for Loop @fun Observed


/* Token objesi tanımla */
--palette: {
  primary:   #0069c6;
  secondary: #0098a7;
  bg:        #f8fafc;
};

/* Anahtar erişimi ile kullan */
.hero {
  background: var(--palette.bg);
  color:      var(--palette.primary);
  border: 1px solid var(--palette.secondary);
}

/* .hero { background: #f8fafc; } */


/* Sayı dizisi tanımla */
--spacing: [1, 2, 3, 4, 6, 8, 12];

/* Utility class üret */
@for(n, var(--spacing)) {
  .p-${n}   { padding: ${n * 4}px; }
  .m-${n}   { margin:  ${n * 4}px; }
  .gap-${n} { gap:     ${n * 4}px; }
}

/* Object'e iterate et */
@for(key, var(--palette)) {
  .text-${key} {
    color: var(--palette[${key}]);
  }
}


/* Fonksiyon tanımı */
@fun: shadow(blur, color) {
  box-shadow: 0 4px ${blur}px
              ${blur / 2}px
              ${color};
}

/* Block emit kullanım */
.card {
  @fun.shadow(24, rgba(0,0,0,0.08));
  padding: 24px;
}

/* Inline value return */
@fun: fontSize(pix) { ${pix / 16}rem; }
.title { font-size: @fun.fontSize(24); }
/* → font-size: 1.5rem */


/* ? — dinamik observed selector
DOM'da .card varsa rule aktif olur. 
DOM'da .card yoksa rule aktif olmaz. DOM takip edilir. 
Sonradan .card DOM'a eklenirse rule aktif olur. */
.card? {
  transition: transform 160ms ease;
}

/* Etkileşim state'i native CSS olarak kalır */
.card:hover {
  transform: translateY(-4px);
}

/* ?! — initial snapshot
DOM'da .card varsa rule aktif olur. DOM takibi yapmaz */
@for(i, [1-4]) {
  .grid-${i}?! {
    grid-template-columns: repeat(${i}, 1fr);
  }
}

Kaynaktan CSS'e akış

.luis Yazın

Object değişkenler, döngüler, koşullar, fonksiyonlar ve standart CSS bir arada.

Derleyici Çalışır

Sonuç: standart CSS, uyarılar ve runtime akışları için gerekli metadata.

Akış Seçin

Compiler-only, browser runtime, hybrid snapshot veya SSR.

CSS Uygulanır

Statik CSS doğrudan uygulanır; runtime kullanılıyorsa initial source seti derlenir.

Stil yazmayı daha çok seveceksiniz.

Kurulum rehberini açın, kullanım modelinizi seçin ve ilk .luis kaynağınızı gerçek CSS çıktısına dönüştürün.

Dokümantasyona Git GitHub'da Takip Et